/* ============================================================ PICCABEE — SHARED DESIGN TOKENS ------------------------------------------------------------ One source of truth for both live surfaces. Before this file there were two unrelated design systems: · the Piccabee SPA (marketing, auth, dashboard, super admin) ran on piccabee.css — honey→magenta, Inter, zinc neutrals · the editor ran on cfk-tokens.css — indigo #4F46E5, Instrument Sans, a warm off-white ladder Nothing was shared, so the editor read as a different product from the dashboard that launches it. HOW THIS FILE WORKS. It loads AFTER each surface's own stylesheet and re-points that surface's existing variable names at a common set of primitives. Nothing is renamed: all 58 --cfk-* variables the editor JSX consumes keep working, and 2.2 MB of JSX stays untouched. Change a primitive here and both surfaces move together. The original values remain in piccabee.css and cfk-tokens.css as dead declarations. That is deliberate for now — it keeps this step a pure addition that can be reverted by dropping one enqueue. Inlining them is a later cleanup. TWO RULES THIS FILE ENCODES: 1. Brand lives in the ink, not the room. The honey→magenta identity is for interactive and brand moments — buttons, focus, active states, the wordmark. Surfaces stay neutral. 2. The editor's chrome must never compete with the customer's artwork. A wedding invitation is the subject; the tool around it is furniture. That is why the canvas and panel neutrals below are true greys with no brand tint, and why the editor loses its indigo rather than gaining pink walls. ============================================================ */ :root { /* ---------- BRAND — "Sunset Coral" ---------- Orange → rose → purple. This is the palette the site actually renders, and it is worth saying why that needed checking in a browser: piccabee.css still declares an older honey→magenta ramp in its :root, but applyAccentPalette() in app.jsx overwrote it inline on every page load, and inline wins over every stylesheet. The CSS said one brand, the running site showed another. Sunset Coral is the locked one, so it is the one that lives here — and app.jsx no longer writes it inline, because this file is now where it comes from. Named for what they are. The editor spent a release with a variable called --cfk-maroon holding an indigo; that is how a palette quietly stops being knowable. */ --pb-sunset-orange: #fb923c; --pb-sunset-rose: #f43f5e; --pb-sunset-purple: #a855f7; --pb-brand: #a855f7; --pb-brand-hover: #9333ea; --pb-brand-soft: #f3e8ff; --pb-brand-ink: #6b21a8; /* text on --pb-brand-soft */ --pb-brand-rgb: 168, 85, 247; --pb-grad-brand: linear-gradient(135deg, #fb923c 0%, #f43f5e 50%, #a855f7 100%); --pb-grad-brand-soft: linear-gradient(135deg, #ffedd5 0%, #fee2e2 50%, #f3e8ff 100%); /* Secondary — teal→indigo. Carries "system" meaning (plan tier, platform state) so it never competes with the brand gradient. */ --pb-teal: #0d9488; --pb-indigo: #6366f1; --pb-indigo-soft: #e0e7ff; --pb-indigo-deep: #4338ca; --pb-grad-cool: linear-gradient(135deg, #0d9488 0%, #6366f1 100%); /* ---------- NEUTRALS ---------- One zinc ladder for every surface and every ink, both apps. */ --pb-n-0: #ffffff; --pb-n-25: #fafafa; --pb-n-50: #f4f4f5; --pb-n-100: #efeff2; --pb-n-200: #e4e4e7; --pb-n-300: #d4d4d8; --pb-n-350: #c4c4ca; --pb-n-400: #a1a1aa; /* The rung that was missing. Tertiary ink sat at n-400, which is 2.3:1 on a light panel — the editor's 10px counts, unit labels and language badges all failed AA there. n-500 clears 4.5:1 on every chrome surface while staying visibly lighter than secondary ink. */ --pb-n-500: #63636c; --pb-n-600: #52525b; --pb-n-800: #18181b; --pb-n-900: #0a0a0f; /* Workspace — the editor's canvas backdrop. True neutral grey on purpose (see rule 2): every artwork the shop opens has to sit on this, so it must favour no hue. */ --pb-canvas: #eaeaec; --pb-canvas-2: #e2e2e6; --pb-canvas-dot: #d6d6da; --pb-canvas-grid: rgba(15,15,25,0.05); /* ---------- SEMANTIC ---------- */ --pb-success: #10b981; --pb-success-soft: #d1fae5; --pb-success-ink: #065f46; --pb-warning: #f59e0b; --pb-warning-soft: #fef3c7; --pb-warning-ink: #92400e; --pb-error: #ef4444; --pb-error-soft: #fee2e2; --pb-error-ink: #991b1b; --pb-info: #3b82f6; --pb-info-soft: #dbeafe; --pb-info-ink: #1e40af; /* ---------- TYPE ---------- One UI face, one display face. Inter runs all chrome on both apps. Instrument Serif is kept as the display voice — it is already loaded for the editor and gives the brand editorial range that Inter alone cannot. The Indic stacks are UI-chrome only. Fonts used INSIDE a design are the customer's choice and are not tokens. */ --pb-font-ui: "Inter", "Inter Display", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; --pb-font-display: "Instrument Serif", "Playfair Display", Georgia, serif; --pb-font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; --pb-font-label: "Quicksand", "Inter", sans-serif; --pb-font-tamil: "Noto Serif Tamil", "Noto Sans Tamil", "Nirmala UI", "Latha", sans-serif; --pb-font-deva: "Noto Serif Devanagari", "Noto Sans Devanagari", "Nirmala UI", "Mangal", sans-serif; --pb-text-2xs: 10px; --pb-text-xs: 11px; --pb-text-sm: 12px; --pb-text-md: 13px; --pb-text-base: 14px; --pb-text-lg: 16px; --pb-text-xl: 18px; --pb-text-2xl: 22px; --pb-text-3xl: 28px; --pb-text-4xl: 36px; --pb-text-5xl: 48px; --pb-text-6xl: 64px; --pb-text-7xl: 88px; /* ---------- SPACE ---------- */ --pb-s-0: 0; --pb-s-1: 2px; --pb-s-2: 4px; --pb-s-3: 6px; --pb-s-4: 8px; --pb-s-5: 10px; --pb-s-6: 12px; --pb-s-8: 16px; --pb-s-10: 20px; --pb-s-12: 24px; --pb-s-16: 32px; --pb-s-20: 40px; --pb-s-24: 48px; --pb-s-32: 64px; --pb-s-40: 80px; /* ---------- RADIUS ---------- Reconciled from two near-identical scales. The editor's 18/24 collapse onto the dashboard's 16/20 — a 2px difference nobody can see, and one scale is worth more than that precision. */ --pb-r-xs: 4px; --pb-r-sm: 6px; --pb-r-md: 8px; --pb-r-lg: 12px; --pb-r-xl: 16px; --pb-r-2xl: 20px; --pb-r-full: 999px; /* ---------- SHADOW ---------- Flat shadows are neutral; floating ones carry a faint brand warmth in the drop, which is what made the dashboard's tiles feel lit rather than pasted on. The editor's floating surfaces additionally keep their glass edge treatment — a lit top edge, a hairline ring, a bottom inner glow — because a glass panel over artwork needs an edge to read as a pane at all. */ --pb-sh-xs: 0 1px 2px rgba(10,10,15,0.04); --pb-sh-sm: 0 1px 3px rgba(10,10,15,0.05), 0 1px 2px rgba(10,10,15,0.03); --pb-sh-md: 0 1px 3px rgba(10,10,15,0.05), 0 8px 24px rgba(var(--pb-brand-rgb), 0.08); --pb-sh-lg: 0 4px 6px rgba(10,10,15,0.05), 0 16px 40px rgba(var(--pb-brand-rgb), 0.12); --pb-sh-xl: 0 8px 12px rgba(10,10,15,0.06), 0 32px 64px rgba(var(--pb-brand-rgb), 0.16); --pb-sh-focus: 0 0 0 3px rgba(var(--pb-brand-rgb), 0.22); --pb-glass-edge: inset 0 1px 0 rgba(255,255,255,0.65), inset 0 0 0 1px rgba(255,255,255,0.35), inset 0 -24px 36px -30px rgba(255,255,255,0.55); --pb-sh-float-1: var(--pb-glass-edge), 0 4px 14px rgba(10,10,15,0.10), 0 2px 4px rgba(10,10,15,0.05); --pb-sh-float-2: var(--pb-glass-edge), 0 10px 30px rgba(10,10,15,0.14), 0 3px 8px rgba(10,10,15,0.06); --pb-sh-float-3: var(--pb-glass-edge), 0 14px 40px rgba(10,10,15,0.16), 0 2px 8px rgba(10,10,15,0.10); /* ---------- MOTION ---------- The curves the dashboard motion pass settled on. Built-in CSS easings are too weak to read as intentional at these speeds. */ --pb-ease-out: cubic-bezier(0.23, 1, 0.32, 1); --pb-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); --pb-dur-1: 120ms; --pb-dur-2: 200ms; --pb-dur-3: 320ms; /* ---------- Z ---------- */ --pb-z-canvas: 1; --pb-z-floating: 50; --pb-z-popover: 100; --pb-z-toolbar: 150; --pb-z-modal: 200; --pb-z-toast: 300; } /* ============================================================ SURFACE MAP — PICCABEE SPA marketing · auth · dashboard · super admin (piccabee.css) Mostly identity mappings: this app already carried the identity we are standardising on. The value is that its names now derive from the primitives above, so the two apps can never drift again. ============================================================ */ :root { --bg-page: var(--pb-n-0); --bg-surface: var(--pb-n-25); --bg-soft: var(--pb-n-50); --bg-sunken: var(--pb-n-100); --ink-1: var(--pb-n-900); --ink-2: var(--pb-n-800); --ink-3: var(--pb-n-600); --ink-4: var(--pb-n-400); --ink-5: var(--pb-n-300); --border: var(--pb-n-200); --border-strong: var(--pb-n-300); --accent-start: var(--pb-sunset-orange); --accent-mid: var(--pb-sunset-rose); --accent-end: var(--pb-sunset-purple); --accent-gradient: var(--pb-grad-brand); --accent-gradient-soft: var(--pb-grad-brand-soft); --accent-solid: var(--pb-brand); --cool-start: var(--pb-teal); --cool-end: var(--pb-indigo); --cool-gradient: var(--pb-grad-cool); --cool-solid: var(--pb-indigo); --success: var(--pb-success); --warning: var(--pb-warning); --error: var(--pb-error); --info: var(--pb-info); --success-soft: var(--pb-success-soft); --warning-soft: var(--pb-warning-soft); --error-soft: var(--pb-error-soft); --info-soft: var(--pb-info-soft); --r-sm: var(--pb-r-sm); --r-md: var(--pb-r-md); --r-lg: var(--pb-r-lg); --r-xl: var(--pb-r-xl); --r-2xl: var(--pb-r-2xl); --r-full: var(--pb-r-full); --shadow-xs: var(--pb-sh-xs); --shadow-sm: var(--pb-sh-sm); --shadow-md: var(--pb-sh-md); --shadow-lg: var(--pb-sh-lg); --shadow-xl: var(--pb-sh-xl); --shadow-focus: var(--pb-sh-focus); --font-sans: var(--pb-font-ui); --font-mono: var(--pb-font-mono); --font-label: var(--pb-font-label); --font-tamil: var(--pb-font-tamil); --font-deva: var(--pb-font-deva); --ease-out: var(--pb-ease-out); --ease-in-out: var(--pb-ease-in-out); } /* ============================================================ SURFACE MAP — EDITOR (cfk-tokens.css) This is where the two products become one. The editor arrives here indigo, Instrument Sans, and warm off-white, and leaves carrying Sunset Coral, Inter, and the shared neutrals. NOTE: the accent below is the stylesheet's answer, and for the editor that is only half the story. cfkApplyAppearance() writes --cfk-maroon* inline on the .cfk-v2-root mount from a super-admin branding setting, and inline beats this file. The setting is what actually decides the editor's accent; this is the fallback. Legacy names are honoured, not fixed: --cfk-maroon has held an indigo since July and now holds magenta. The names lie about their values, but 58 of them are consumed across 1.1 MB of editor JSX, and renaming them is a refactor, not a redesign. ============================================================ */ :root { /* Surfaces — warm off-white ladder → the shared neutral ladder. The editor gets cooler and quieter, which is the point: this is furniture standing around somebody's wedding invitation. */ --cfk-paper: var(--pb-n-0); --cfk-surface: var(--pb-n-25); --cfk-surface-2: var(--pb-n-50); --cfk-surface-3: var(--pb-n-200); --cfk-canvas-bg: var(--pb-canvas); --cfk-canvas-bg-2: var(--pb-canvas-2); --cfk-canvas-dot: var(--pb-canvas-dot); --cfk-canvas-grid: var(--pb-canvas-grid); /* Ink */ /* ink-3 carries real information in this UI — asset counts, the RGB/CMYK labels, the TA/HI language badges on layers — so it has to clear AA, not just look quiet. ink-4 is the decorative tier. */ --cfk-ink: var(--pb-n-800); --cfk-ink-2: var(--pb-n-600); --cfk-ink-3: var(--pb-n-500); --cfk-ink-4: var(--pb-n-400); /* Accent. --cfk-maroon is the editor's primary interactive colour; --cfk-gold is its secondary. Both re-point at the Piccabee pair. */ --cfk-maroon: var(--pb-brand); --cfk-maroon-hover: var(--pb-brand-hover); --cfk-maroon-soft: var(--pb-brand-soft); --cfk-gold: var(--pb-indigo); --cfk-gold-soft: var(--pb-indigo-soft); --cfk-gold-deep: var(--pb-indigo-deep); /* Semantic */ --cfk-success: var(--pb-success); --cfk-success-soft: var(--pb-success-soft); --cfk-warn: var(--pb-warning); --cfk-warn-soft: var(--pb-warning-soft); --cfk-danger: var(--pb-error); --cfk-danger-soft: var(--pb-error-soft); --cfk-info: var(--pb-info); --cfk-info-soft: var(--pb-info-soft); --cfk-line: var(--pb-n-200); --cfk-line-strong: var(--pb-n-300); /* Text on dark surfaces (the Ink theme, dark overlays). */ --cfk-ink-on-dark: var(--pb-n-50); --cfk-ink-on-dark-2: var(--pb-n-350); /* These two are consumed by the editor but were never declared anywhere, so every call site fell through to its own inline fallback — and --cfk-bg's fallback is #faf7f2, the warm ivory of the retired "Cards For Knots" palette. That surface has been rendering in a dead brand colour. Declaring them here retires the fallbacks and puts the two back on the system. */ --cfk-bg: var(--pb-n-25); --cfk-bg-2: rgba(15, 15, 25, 0.05); /* The top bar is near-opaque frost. It MUST stay a token rather than a hardcoded white: its text follows --cfk-ink, so a fixed white bar turns white-on-white the moment the Ink theme lightens the ink. Deliberately NOT re-pointed here, and left in this map only as the place a future dark theme would override it: --cfk-glass, --cfk-glass-blur and --cfk-glass-strong are recomputed at runtime by cfkApplyAppearance() from the glass slider, so a stylesheet value for them would be overwritten on first paint. The cursors delegate to the OS by design. --cfk-paper-center-x and --cfk-canvas-gap-w are live layout measurements, not theme. */ --cfk-topbar-bg: rgba(255,255,255,0.9); /* Type — Instrument Sans → Inter for all chrome. Instrument Serif stays as the display voice. */ --cfk-font-ui: var(--pb-font-ui); --cfk-font-body: var(--pb-font-ui); --cfk-font-display: var(--pb-font-display); --cfk-font-mono: var(--pb-font-mono); --cfk-font-tamil: var(--pb-font-tamil); --cfk-font-hindi: var(--pb-font-deva); --cfk-text-2xs: var(--pb-text-2xs); --cfk-text-xs: var(--pb-text-xs); --cfk-text-sm: var(--pb-text-sm); --cfk-text-md: var(--pb-text-md); --cfk-text-base: var(--pb-text-base); --cfk-text-lg: var(--pb-text-lg); --cfk-text-xl: var(--pb-text-xl); --cfk-text-2xl: var(--pb-text-2xl); --cfk-text-3xl: var(--pb-text-3xl); --cfk-text-4xl: var(--pb-text-4xl); --cfk-text-5xl: var(--pb-text-5xl); --cfk-text-6xl: var(--pb-text-6xl); --cfk-text-7xl: var(--pb-text-7xl); --cfk-s-0: var(--pb-s-0); --cfk-s-1: var(--pb-s-1); --cfk-s-2: var(--pb-s-2); --cfk-s-3: var(--pb-s-3); --cfk-s-4: var(--pb-s-4); --cfk-s-5: var(--pb-s-5); --cfk-s-6: var(--pb-s-6); --cfk-s-8: var(--pb-s-8); --cfk-s-10: var(--pb-s-10); --cfk-s-12: var(--pb-s-12); --cfk-s-16: var(--pb-s-16); --cfk-s-20: var(--pb-s-20); --cfk-s-24: var(--pb-s-24); --cfk-s-32: var(--pb-s-32); --cfk-s-40: var(--pb-s-40); --cfk-r-xs: var(--pb-r-xs); --cfk-r-sm: var(--pb-r-sm); --cfk-r-md: var(--pb-r-md); --cfk-r-lg: var(--pb-r-lg); --cfk-r-xl: var(--pb-r-xl); --cfk-r-2xl: var(--pb-r-2xl); --cfk-r-full: var(--pb-r-full); /* sh-1/sh-2 stay plain: an inset ring on a small chip reads as a bug. sh-3/4/5 are the floating-surface set and keep the glass edge treatment. */ --cfk-sh-1: var(--pb-sh-xs); --cfk-sh-2: var(--pb-sh-sm); --cfk-sh-3: var(--pb-sh-float-1); --cfk-sh-4: var(--pb-sh-float-2); --cfk-sh-5: var(--pb-sh-float-3); --cfk-ease: var(--pb-ease-out); --cfk-ease-out: var(--pb-ease-out); --cfk-dur-1: var(--pb-dur-1); --cfk-dur-2: var(--pb-dur-2); --cfk-dur-3: var(--pb-dur-3); --cfk-z-canvas: var(--pb-z-canvas); --cfk-z-floating: var(--pb-z-floating); --cfk-z-popover: var(--pb-z-popover); --cfk-z-toolbar: var(--pb-z-toolbar); --cfk-z-modal: var(--pb-z-modal); --cfk-z-toast: var(--pb-z-toast); /* The idle pointer is the one cursor carrying brand colour, so it has to move with the brand. The hex is baked into the data URI and cannot be var()-ed — this is the whole arrow, re-inked in the brand purple. (--cfk-cursor-rotate is still indigo; it is redrawn in the editor pass rather than duplicated here.) */ --cfk-cursor-default: url("data:image/svg+xml;utf8,") 3 1, auto; }