/* FLDS semantic color tokens — synced from Figma Yuij6M0wnQ43dzJuNh1NyK (⬥ Color) */ :root { /* ─── Fire Orange — Brand base scale (Light mode, steps 1–12) ────────── */ --flds-brand-1: #FCFAF9; --flds-brand-2: #FFF3EE; --flds-brand-3: #FFE6DB; /* = interactive/primary-subtle */ --flds-brand-4: #FFD3BE; --flds-brand-5: #FFC5AC; --flds-brand-6: #FFB494; --flds-brand-7: #FFA07F; --flds-brand-8: #F5875F; --flds-brand-9: #FF5A00; /* primary brand */ --flds-brand-10: #F24A00; --flds-brand-11: #D83700; /* solid button hover */ --flds-brand-12: #5C2A18; /* ─── Orange-alt — utility scale (Light mode, from utility/orange/*) ─── */ --flds-orange-50: #FFF7EC; --flds-orange-100: #FFEDD3; --flds-orange-200: #FFD8A5; --flds-orange-300: #FFBC6D; --flds-orange-400: #FF9332; --flds-orange-500: #FF740A; --flds-orange-600: #FF5A00; --flds-orange-700: #CC3F02; /* ─── Stone — Warm Neutral base scale (Light mode, steps 1–12) ──────── */ --flds-stone-1: #FEFDF9; --flds-stone-2: #FBF9F4; --flds-stone-3: #F3F0E9; /* = bg/ui */ --flds-stone-4: #ECE8DF; /* = border/hairline */ --flds-stone-5: #E5E1D6; /* = border/muted, bg/ui-active */ --flds-stone-6: #DDD9CF; /* = border/subtle, fg/separator */ --flds-stone-7: #D2CEC4; /* = border/ui */ --flds-stone-8: #BFBBB1; /* = border/ui-hover, text/disabled */ --flds-stone-9: #908C83; /* = bg/solid, text/muted */ --flds-stone-10: #868178; /* = bg/solid-hover, text/subtle */ --flds-stone-11: #666259; /* = text/default */ --flds-stone-12: #232018; /* = text/strong */ /* ─── Brand semantics ───────────────────────────────────────────────── */ --flds-brand: #FF5A00; /* brand-9 */ --flds-brand-hover: #D83700; /* brand-11 — solid fill button hover */ --flds-brand-border: #FF5A00; /* border/brand */ --flds-brand-interactive: #CA4700; /* interactive/primary Light — text links, caret */ --flds-brand-selection: #FF5A00; /* variant card selected inset ring */ /* ─── Background ────────────────────────────────────────────────────── */ --flds-bg-page: #FEFDF9; /* bg/page = stone-1 */ --flds-bg-subtle: #FBF9F4; /* bg/subtle = stone-2 */ --flds-bg-ui: #F3F0E9; /* bg/ui = stone-3 */ --flds-bg-ui-hover: #ECE8DF; /* bg/ui-hover = stone-4 */ --flds-bg-ui-active: #E5E1D6; /* bg/ui-active = stone-5 */ --flds-bg-card: #FEFDF9; /* bg/card = stone-1 */ --flds-bg-solid: #908C83; /* bg/solid = stone-9 */ --flds-bg-solid-hover: #868178; /* bg/solid-hover= stone-10 */ --flds-bg-inverse: #111110; /* bg/inverse */ /* ─── Text ──────────────────────────────────────────────────────────── */ --flds-text-strong: #232018; /* text/strong = stone-12 */ --flds-text-default: #666259; /* text/default = stone-11 */ --flds-text-subtle: #868178; /* text/subtle = stone-10 */ --flds-text-muted: #908C83; /* text/muted = stone-9 */ --flds-text-disabled: #BFBBB1; /* text/disabled = stone-8 */ --flds-text-brand: #CA4700; /* = interactive/primary */ --flds-text-inverse: #F1EEE7; /* text/inverse */ /* ─── Foreground / Icon ─────────────────────────────────────────────── */ --flds-fg-strong: #232018; /* fg/strong = stone-12 */ --flds-fg-default: #666259; /* fg/default = stone-11 */ --flds-fg-subtle: #868178; /* fg/subtle = stone-10 */ --flds-fg-muted: #908C83; /* fg/muted = stone-9 */ --flds-fg-disabled: #E5E1D6; /* fg/disabled = stone-5 */ --flds-fg-separator: #DDD9CF; /* fg/separator = stone-6 */ --flds-fg-inverse: #B7B4AF; /* fg/inverse */ --flds-fg-brand-subtle: #F5875F; /* fg/brand-subtle = brand-8 */ --flds-fg-accent: #CA4700; /* fg/accent */ /* ─── Border ────────────────────────────────────────────────────────── */ --flds-border-hairline: #ECE8DF; /* border/hairline = stone-4 */ --flds-border-muted: #E5E1D6; /* border/muted = stone-5 */ --flds-separator: #DDD9CF; /* border/subtle = stone-6 */ --flds-border-ui: #D2CEC4; /* border/ui = stone-7 */ --flds-border-ui-hover: #BFBBB1; /* border/ui-hover = stone-8 */ --flds-border-brand: #FF5A00; /* border/brand */ --flds-border-interactive: #CA4700; /* border/interactive Light */ --flds-border-focus: #CA4700; /* border/focus */ --flds-border-button-outline: #232018; /* border/button-outline Light */ --flds-border-media: rgba(144, 140, 131, 0.2); /* ─── Interactive ───────────────────────────────────────────────────── */ --flds-interactive-primary: #CA4700; /* interactive/primary Light */ --flds-interactive-primary-subtle: #FFE6DB; /* interactive/primary-subtle Light */ --flds-interactive-active: #FEFDF9; /* interactive/active Light */ --flds-interactive-base: #E5E1D6; /* interactive/base Light */ /* ─── Status ────────────────────────────────────────────────────────── */ --flds-status-error: #E50000; --flds-status-error-bg: #FFE7E3; --flds-status-error-accessible: #DC0000; --flds-status-success: #00920F; --flds-status-success-bg: #E3F5E2; --flds-status-success-accessible: #008000; --flds-status-warning: #E1A200; --flds-status-warning-bg: #FFEEB9; --flds-status-warning-accessible: #9C6900; /* ─── Badge ─────────────────────────────────────────────────────────── */ --flds-badge-error-bg: #FFE7E3; --flds-badge-error-text: #DC0000; --flds-badge-success-bg: #E3F5E2; --flds-badge-success-text: #008000; --flds-badge-warning-bg: #FFEEB9; --flds-badge-warning-text: #9C6900; --flds-badge-neutral-bg: #F3F0E9; --flds-badge-neutral-text: #666259; /* ─── Tint base & alpha surface tokens ──────────────────────────────── */ --flds-tint-base: color-mix(in srgb, var(--flds-text-strong) 70%, var(--flds-text-brand)); --flds-state-alpha-strong: color-mix(in srgb, var(--flds-text-strong) 18%, transparent); --flds-tab-track: color-mix(in srgb, var(--flds-tint-base), transparent 92%); /* 8% */ --flds-surface-chrome: color-mix(in srgb, var(--flds-tint-base), transparent 95%); /* 5% */ --flds-surface-fill: #F3F0E9; /* = bg/ui, stone-3 */ --flds-surface-fill-hover: color-mix(in srgb, var(--flds-tint-base), transparent 96%); /* 4% */ --flds-surface-fill-hover-subtle: color-mix(in srgb, var(--flds-tint-base), transparent 98%); /* 2% */ --flds-surface-fill-active: color-mix(in srgb, var(--flds-tint-base), transparent 94%); /* 6% */ --flds-hover-tint: var(--flds-surface-fill-hover); --flds-surface-border: #E5E1D6; /* = border/muted, stone-5 */ --flds-surface-border-hover: #D2CEC4; /* = border/ui, stone-7 */ /* Brand-aligned tints */ --flds-brand-hover-tint: color-mix(in srgb, var(--flds-brand), transparent 96%); /* 4% */ --flds-brand-glow-tint: color-mix(in srgb, var(--flds-brand), transparent 92%); /* 8% */ /* ─── Shadows ───────────────────────────────────────────────────────── */ --flds-tab-indicator-shadow: 0 1px 2px rgba(35, 32, 24, 0.06), 0 1px 3px rgba(35, 32, 24, 0.1); --flds-surface-example-shadow: 0 0 0 1px rgba(35, 32, 24, 0.08), 0 2px 2px rgba(35, 32, 24, 0.04); }