/* ============================================================================= Fine Thread — Design Token Foundation Namespace: --ft-* 5-layer model ───────────── L2 Primitive ramp --ft-p-* Raw hex values. The ONLY place in the codebase where literals live. L3 Semantic alias --ft-color-* Name describes role, never appearance. --ft-space-* --ft-radius-* --ft-elev-* L4 Granular --ft-z-* Context + state: z-index tiers, motion semantic --ft-motion-* timings, form/action states. --ft-color-action-* --ft-color-form-* L5 Component hooks --ft-button-* Consumed by component rules; swap one --ft-input-* value to restyle an entire component. L2 scope: :root (global — any surface loading this file can alias --ft-p-*) L3–L5 scope: :root.portal + .portal-shell (Atelier Noir portal only) Public marketing pages must NOT load this file. ============================================================================= */ /* ============================================================================= L2 — Primitive ramp (global :root — no surface-scoping) Raw hex / rgba values live here and nowhere else in the codebase. Exposed on :root so any surface that loads this file (portal, tablet, etc.) can consume --ft-p-* without needing a .portal-shell ancestor. ============================================================================= */ :root { /* Ink ramp */ --ft-p-ink-900: #000000; --ft-p-ink-800: #1a1c1c; --ft-p-ink-700: #3c3b3b; --ft-p-ink-500: #474747; --ft-p-ink-400: #5f5e5e; --ft-p-ink-300: #777777; /* Surface ramp */ --ft-p-surface-100: #ffffff; --ft-p-surface-200: #f9f9f9; --ft-p-surface-300: #f3f3f4; --ft-p-surface-400: #e8e8e8; --ft-p-surface-500: #e2e2e2; /* On-primary (cream — text/icon on the dark rail) */ --ft-p-cream: #e5e2e1; /* Outline ramp */ --ft-p-outline-400: #c6c6c6; /* Feedback ramp */ --ft-p-green-700: #1f6f3a; --ft-p-red-700: #ba1a1a; --ft-p-amber-700: #8a5a00; /* Status ramp (each maps to a named status in the order pipeline) */ --ft-p-status-pending: #5f5e5e; --ft-p-status-stock: #6b5d3a; --ft-p-status-scheduled: #2f3a4a; --ft-p-status-invoiced: #4a3a2a; --ft-p-status-exported: #2a3a4a; --ft-p-status-paid: #0a4a22; --ft-p-status-cancelled: #8a3a3a; /* Dark-surface alpha ramp (cream tints on black/near-black bg) */ --ft-p-cream-04: rgba(229, 226, 225, 0.04); --ft-p-cream-06: rgba(229, 226, 225, 0.06); --ft-p-cream-08: rgba(229, 226, 225, 0.08); --ft-p-cream-10: rgba(229, 226, 225, 0.10); --ft-p-cream-12: rgba(229, 226, 225, 0.12); --ft-p-cream-45: rgba(229, 226, 225, 0.45); --ft-p-cream-55: rgba(229, 226, 225, 0.55); --ft-p-cream-60: rgba(229, 226, 225, 0.60); --ft-p-cream-70: rgba(229, 226, 225, 0.70); --ft-p-cream-85: rgba(229, 226, 225, 0.85); /* Ink alpha ramp (dark ink at opacity on light surfaces) */ --ft-p-ink-05: rgba(0, 0, 0, 0.05); --ft-p-ink-08: rgba(26, 28, 28, 0.08); --ft-p-ink-pure-08: rgba(0, 0, 0, 0.08); --ft-p-ink-15: rgba(26, 28, 28, 0.15); --ft-p-ink-32: rgba(26, 28, 28, 0.32); --ft-p-ink-40: rgba(26, 28, 28, 0.40); --ft-p-ink-55: rgba(20, 18, 18, 0.55); --ft-p-ink-60: rgba(20, 18, 18, 0.60); /* Dark-toast feedback accents (brighter shades for use on dark bg) */ --ft-p-toast-success-dark: #4ade80; --ft-p-toast-error-dark: #f87171; --ft-p-toast-warning-dark: #fbbf24; /* Glass */ --ft-p-glass-bg: rgba(249, 249, 249, 0.78); --ft-p-glass-blur: 20px; } :root.portal, .portal-shell { /* ------------------------------------------------------------------------- L3 — Semantic aliases Name describes the role, not the colour. Reference these in component CSS. -------------------------------------------------------------------------*/ /* Surfaces (vellum-paper hierarchy) */ --ft-color-bg: var(--ft-p-surface-200); --ft-color-bg-low: var(--ft-p-surface-300); --ft-color-bg-lowest: var(--ft-p-surface-100); --ft-color-bg-high: var(--ft-p-surface-400); --ft-color-bg-highest: var(--ft-p-surface-500); /* Ink */ --ft-color-on-bg: var(--ft-p-ink-800); --ft-color-on-bg-muted: var(--ft-p-ink-500); --ft-color-on-primary: var(--ft-p-cream); /* Brand */ --ft-color-primary: var(--ft-p-ink-900); --ft-color-primary-dim: var(--ft-p-ink-700); --ft-color-secondary: var(--ft-p-ink-400); /* Lines */ --ft-color-outline: var(--ft-p-ink-300); --ft-color-outline-subtle: var(--ft-p-outline-400); --ft-color-outline-ghost: rgba(198, 198, 198, 0.20); /* Feedback */ --ft-color-success: var(--ft-p-green-700); --ft-color-error: var(--ft-p-red-700); --ft-color-warning: var(--ft-p-amber-700); --ft-color-info: var(--ft-p-ink-800); /* Status colours (driven by real workflow status values) */ --ft-color-status-pending: var(--ft-p-status-pending); --ft-color-status-stock-received: var(--ft-p-status-stock); --ft-color-status-artwork-approved: var(--ft-p-ink-800); --ft-color-status-scheduled: var(--ft-p-status-scheduled); --ft-color-status-in-production: var(--ft-p-ink-700); --ft-color-status-ready: var(--ft-p-ink-800); --ft-color-status-completed: var(--ft-p-ink-900); --ft-color-status-invoiced: var(--ft-p-status-invoiced); --ft-color-status-exported: var(--ft-p-status-exported); --ft-color-status-paid: var(--ft-p-status-paid); --ft-color-status-cancelled: var(--ft-p-status-cancelled); /* Spacing — 4-pt core scale */ --ft-space-1: 4px; --ft-space-2: 8px; --ft-space-3: 12px; --ft-space-4: 16px; --ft-space-5: 24px; --ft-space-6: 32px; --ft-space-7: 48px; --ft-space-8: 64px; /* Spacing — extended half-steps (used in portal_atelier.css) */ --ft-space-px: 1px; --ft-space-0-5: 2px; --ft-space-1-5: 6px; --ft-space-2-5: 10px; --ft-space-3-5: 14px; --ft-space-4-5: 18px; --ft-space-5-0: 20px; --ft-space-5-5: 22px; --ft-space-6-5: 28px; --ft-space-9: 40px; /* Layout — component dimension tokens */ --ft-toast-w-min: 280px; --ft-toast-w-max: 420px; --ft-image-w-max: 320px; --ft-drawer-w-sm: 480px; --ft-drawer-w-md: 720px; --ft-drawer-w-lg: 960px; /* Radii — "tailored, sharp" */ --ft-radius-sm: 2px; --ft-radius-md: 4px; --ft-radius-lg: 8px; /* Elevation — soft glow, never muddy drop-shadow */ --ft-elev-1: 0 2px 8px rgba(26, 28, 28, 0.04); --ft-elev-2: 0 8px 24px rgba(26, 28, 28, 0.06); --ft-elev-3: 0 24px 60px rgba(26, 28, 28, 0.10); /* Glass */ --ft-glass-bg: var(--ft-p-glass-bg); --ft-glass-blur: var(--ft-p-glass-blur); /* Layout constants */ --ft-side-rail-w: 248px; --ft-top-bar-h: 80px; /* ------------------------------------------------------------------------- L4 — Granular semantic / context + state -------------------------------------------------------------------------*/ /* Z-index tiers (ascending stacking order) */ --ft-z-backdrop: 899; --ft-z-rail: 900; --ft-z-topbar: 901; --ft-z-drawer: 1100; --ft-z-toast: 1200; /* Motion timings These canonical values follow the task specification. The portal CSS previously used a mix of 0.18s / 0.24s / 0.28s / 0.22s / 0.32s; those are all replaced by the named tokens below. */ --ft-motion-fast: 120ms; /* micro interactions — hover, focus rings */ --ft-motion-base: 200ms; /* standard transitions — drawer backdrop */ --ft-motion-slow: 320ms; /* heavier transitions — rail open, drawer */ --ft-motion-enter: 220ms; /* toast / hint enter / leave animations */ --ft-motion-spring: 320ms; /* spring easing — drawer panel, stitch needle*/ /* Dark-surface interaction states (cream on black/primary background) */ --ft-color-on-dark-muted: var(--ft-p-cream-45); --ft-color-on-dark-mid: var(--ft-p-cream-55); --ft-color-on-dark-hint: var(--ft-p-cream-60); --ft-color-on-dark-default: var(--ft-p-cream-70); --ft-color-on-dark-strong: var(--ft-p-cream-85); --ft-color-on-dark-divider: var(--ft-p-cream-08); --ft-color-on-dark-bg-subtle: var(--ft-p-cream-04); --ft-color-on-dark-bg-hover: var(--ft-p-cream-06); --ft-color-on-dark-bg-active: var(--ft-p-cream-10); --ft-color-on-dark-bg-cell: var(--ft-p-cream-12); /* Ink overlay states (dark ink at opacity on light surfaces) */ --ft-color-ink-subtle: var(--ft-p-ink-08); --ft-color-ink-cell: var(--ft-p-ink-55); --ft-color-ink-hint: var(--ft-p-ink-60); /* Scrims */ --ft-color-scrim: var(--ft-p-ink-40); --ft-color-scrim-light: var(--ft-p-ink-32); /* CTA / inverted button ring */ --ft-color-cta-ring: var(--ft-p-ink-15); /* Component-specific decorative shadows */ --ft-color-needle-glow: var(--ft-p-ink-pure-08); --ft-color-hint-caret-shadow: var(--ft-p-ink-05); /* Dark-toast feedback accent stripes */ --ft-color-toast-success-dark: var(--ft-p-toast-success-dark); --ft-color-toast-error-dark: var(--ft-p-toast-error-dark); --ft-color-toast-warning-dark: var(--ft-p-toast-warning-dark); /* Action colours */ --ft-color-action-bg-default: transparent; --ft-color-action-bg-hover: var(--ft-p-cream-06); --ft-color-action-bg-active: var(--ft-p-cream-10); /* Form */ --ft-color-form-border-default: var(--ft-color-outline-subtle); --ft-color-form-border-focus: var(--ft-color-primary); --ft-color-form-bg-focus: var(--ft-color-bg-lowest); /* ------------------------------------------------------------------------- L5 — Component hooks Swap one token here to restyle an entire component family. -------------------------------------------------------------------------*/ /* Button */ --ft-button-bg: var(--ft-color-primary); --ft-button-color: var(--ft-color-on-primary); --ft-button-radius: var(--ft-radius-sm); --ft-button-transition: var(--ft-motion-fast) ease; /* Input */ --ft-input-border: var(--ft-color-form-border-default); --ft-input-border-focus: var(--ft-color-form-border-focus); --ft-input-bg-focus: var(--ft-color-form-bg-focus); --ft-input-transition: var(--ft-motion-fast) ease; }