/* ========================================================================= Blue Sky Store — Canonical Design Token Engine (Fable 5 foundation) ------------------------------------------------------------------------- Namespaced `--bss-*` layer. This file only DEFINES custom properties and does NOT style any element, so linking it cannot change layout by itself. `bss-fable5-bridge.css` (loaded last) maps these onto every legacy namespace so the whole product renders from ONE palette. Architecture Tier 1 primitives raw ramps, never used directly by components Tier 2 semantic roles (surface / content / interactive / status) Tier 3 system type, space, radius, elevation, motion, layering Brand rules (Fable 5): - Palette is BLUE + PURPLE on light surfaces and CHARCOAL (not navy) dark. - No navy as a brand/primary color. No gold as a brand accent. - Gold-like hues are permitted ONLY as the semantic "warning" channel. Progressive enhancement contract: Every derived value is declared twice — a static fallback first, then a `color-mix()` refinement. Engines without `color-mix` keep the fallback, so no declaration can ever resolve to nothing. ========================================================================= */ :root { color-scheme: light dark; /* ======================================================================= TIER 1 — PRIMITIVES ======================================================================= */ /* --- Brand: Blue ---------------------------------------------------- */ --bss-blue-50: #eef4ff; --bss-blue-100: #dbe7ff; --bss-blue-200: #b9ceff; --bss-blue-300: #8cb0ff; --bss-blue-400: #5f8dfb; --bss-blue-500: #2f6fed; --bss-blue-600: #1f55bd; --bss-blue-700: #1a459b; --bss-blue-800: #17386f; --bss-blue-900: #142a4d; --bss-blue-950: #0e1c33; /* --- Brand: Purple (secondary accent) ------------------------------- */ --bss-purple-50: #f3effe; --bss-purple-100: #e6dcfd; --bss-purple-200: #cdb8fb; --bss-purple-300: #b090f6; --bss-purple-400: #9366ef; --bss-purple-500: #7a45e0; --bss-purple-600: #6534c2; --bss-purple-700: #522a9c; --bss-purple-800: #3f2277; --bss-purple-900: #2c1852; --bss-purple-950: #1d1038; /* --- Neutral: Charcoal (dark base — deliberately NOT navy) ---------- */ /* Near-neutral, very low blue chroma so dark mode reads as ink. */ --bss-charcoal-950: #0a0b0e; --bss-charcoal-900: #101216; --bss-charcoal-850: #15181d; --bss-charcoal-800: #1b1f26; --bss-charcoal-700: #262b34; --bss-charcoal-600: #343b46; --bss-charcoal-500: #48505c; --bss-charcoal-400: #5f6875; /* --- Neutral: light greys ------------------------------------------- */ --bss-grey-50: #f6f8fc; --bss-grey-100: #eef2f8; --bss-grey-200: #e2e8f1; --bss-grey-300: #cdd6e3; --bss-grey-400: #a7b2c2; --bss-grey-500: #7c8697; --bss-grey-600: #5b6472; --bss-grey-700: #414954; --bss-grey-800: #2b313a; --bss-grey-900: #1a1f26; /* --- Status hues ----------------------------------------------------- */ /* Light-mode values are tuned to clear WCAG AA (>=4.5:1) against white. */ --bss-emerald-500: #0f7a58; --bss-emerald-300: #4fd1a5; --bss-amber-600: #9a5d0c; --bss-amber-300: #f0b460; --bss-rose-600: #b3303c; --bss-rose-300: #ff8f99; --bss-white: #ffffff; --bss-black: #000000; /* ======================================================================= TIER 2 — SEMANTIC (LIGHT MODE DEFAULTS) ======================================================================= */ /* --- Interactive: primary ------------------------------------------- */ /* blue-600 on white = 6.5:1 — safe for solid buttons with white label. */ --bss-primary: var(--bss-blue-600); --bss-primary-strong: var(--bss-blue-700); --bss-primary-hover: #1a459b; --bss-primary-hover: color-mix(in oklab, var(--bss-primary) 86%, var(--bss-black)); --bss-primary-active: #17386f; --bss-primary-active: color-mix(in oklab, var(--bss-primary) 74%, var(--bss-black)); --bss-primary-soft: rgba(31, 85, 189, 0.10); --bss-primary-soft: color-mix(in oklab, var(--bss-primary) 10%, transparent); --bss-primary-subtle: rgba(31, 85, 189, 0.05); --bss-primary-subtle: color-mix(in oklab, var(--bss-primary) 5%, transparent); --bss-primary-muted: rgba(31, 85, 189, 0.22); --bss-primary-muted: color-mix(in oklab, var(--bss-primary) 22%, transparent); --bss-on-primary: var(--bss-white); /* --- Interactive: accent -------------------------------------------- */ --bss-accent: var(--bss-purple-500); --bss-accent-strong: var(--bss-purple-600); --bss-accent-hover: #6534c2; --bss-accent-hover: color-mix(in oklab, var(--bss-accent) 86%, var(--bss-black)); --bss-accent-soft: rgba(122, 69, 224, 0.10); --bss-accent-soft: color-mix(in oklab, var(--bss-accent) 10%, transparent); --bss-accent-subtle: rgba(122, 69, 224, 0.05); --bss-accent-subtle: color-mix(in oklab, var(--bss-accent) 5%, transparent); --bss-on-accent: var(--bss-white); /* --- Status channels -------------------------------------------------- */ --bss-success: var(--bss-emerald-500); --bss-success-contrast: var(--bss-white); --bss-success-soft: rgba(15, 122, 88, 0.11); --bss-success-soft: color-mix(in oklab, var(--bss-success) 11%, transparent); --bss-warning: var(--bss-amber-600); --bss-warning-contrast: var(--bss-white); --bss-warning-soft: rgba(154, 93, 12, 0.12); --bss-warning-soft: color-mix(in oklab, var(--bss-warning) 12%, transparent); --bss-danger: var(--bss-rose-600); --bss-danger-contrast: var(--bss-white); --bss-danger-soft: rgba(179, 48, 60, 0.11); --bss-danger-soft: color-mix(in oklab, var(--bss-danger) 11%, transparent); --bss-info: var(--bss-blue-600); --bss-info-contrast: var(--bss-white); --bss-info-soft: rgba(31, 85, 189, 0.11); --bss-info-soft: color-mix(in oklab, var(--bss-info) 11%, transparent); /* --- Surfaces (elevation ladder) ------------------------------------- */ --bss-bg: var(--bss-grey-50); --bss-bg-soft: var(--bss-white); --bss-canvas: var(--bss-grey-50); --bss-canvas-deep: #eaeff7; --bss-surface: var(--bss-white); --bss-surface-raised: var(--bss-white); --bss-surface-muted: var(--bss-grey-100); --bss-surface-sunken: var(--bss-grey-100); --bss-surface-overlay: rgba(255, 255, 255, 0.86); --bss-surface-inverse: var(--bss-charcoal-900); /* --- Borders ---------------------------------------------------------- */ --bss-border: var(--bss-grey-200); --bss-border-subtle: var(--bss-grey-100); --bss-border-strong: var(--bss-grey-300); /* --- Content ---------------------------------------------------------- */ --bss-text: #10151f; --bss-text-soft: var(--bss-grey-600); /* Tuned to clear WCAG AA (4.5:1) on both --bss-surface and --bss-bg; the grey-500 primitive stays untouched so the ramp remains even. */ --bss-text-faint: #6a7381; --bss-text-inverse: var(--bss-white); --bss-text-link: var(--bss-primary); /* --- Focus ------------------------------------------------------------ */ --bss-ring: rgba(31, 85, 189, 0.45); --bss-ring: color-mix(in oklab, var(--bss-primary) 45%, transparent); /* --- Glass / translucency --------------------------------------------- */ --bss-glass-bg: rgba(255, 255, 255, 0.72); --bss-glass-border: rgba(255, 255, 255, 0.55); --bss-glass-blur: saturate(180%) blur(20px); /* --- Brand gradients --------------------------------------------------- */ --bss-gradient-brand: linear-gradient(135deg, var(--bss-blue-500), var(--bss-purple-500)); --bss-gradient-brand-soft: linear-gradient(135deg, var(--bss-blue-50), var(--bss-purple-50)); --bss-gradient-sheen: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0)); /* --- Elevation (layered, light mode) ----------------------------------- */ /* Two-layer shadows read as real depth instead of a single blurry haze. */ --bss-shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.06); --bss-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05), 0 4px 12px rgba(16, 24, 40, 0.06); --bss-shadow-md: 0 2px 4px rgba(16, 24, 40, 0.05), 0 12px 28px rgba(16, 24, 40, 0.09); --bss-shadow-lg: 0 4px 8px rgba(16, 24, 40, 0.05), 0 24px 56px rgba(16, 24, 40, 0.13); --bss-shadow-xl: 0 8px 16px rgba(16, 24, 40, 0.06), 0 40px 96px rgba(16, 24, 40, 0.18); --bss-shadow-primary: 0 10px 30px rgba(31, 85, 189, 0.26); --bss-shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.6); /* ======================================================================= TIER 3 — SYSTEM (theme independent) ======================================================================= */ /* --- Typography families ---------------------------------------------- */ --bss-font-sans: "Yekan", "B Yekan", "Yekan Bakh", "YekanBakh", Tahoma, "Segoe UI", Arial, sans-serif; --bss-font-mono: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace; /* --- Fluid type scale (min → max across 360px…1440px) ------------------ */ --bss-text-2xs: clamp(0.625rem, 0.60rem + 0.12vw, 0.6875rem); --bss-text-xs: clamp(0.6875rem, 0.66rem + 0.14vw, 0.75rem); --bss-text-sm: clamp(0.8125rem, 0.79rem + 0.14vw, 0.875rem); --bss-text-md: clamp(0.9375rem, 0.91rem + 0.16vw, 1rem); --bss-text-lg: clamp(1.0625rem, 1.02rem + 0.22vw, 1.1875rem); --bss-text-xl: clamp(1.25rem, 1.17rem + 0.38vw, 1.5rem); --bss-text-2xl: clamp(1.5rem, 1.35rem + 0.68vw, 1.95rem); --bss-text-3xl: clamp(1.875rem, 1.62rem + 1.12vw, 2.6rem); --bss-text-4xl: clamp(2.25rem, 1.83rem + 1.85vw, 3.4rem); /* --- Line heights / tracking -------------------------------------------- */ --bss-leading-tight: 1.24; --bss-leading-snug: 1.42; --bss-leading-normal: 1.65; --bss-leading-relaxed: 1.85; --bss-tracking-tight: -0.015em; --bss-tracking-normal: 0em; --bss-tracking-wide: 0.04em; /* --- Font weights -------------------------------------------------------- */ --bss-weight-regular: 400; --bss-weight-medium: 500; --bss-weight-semibold: 600; --bss-weight-bold: 700; --bss-weight-black: 800; /* --- Spacing scale -------------------------------------------------------- */ --bss-space-3xs: 0.125rem; /* 2px */ --bss-space-2xs: 0.25rem; /* 4px */ --bss-space-xs: 0.5rem; /* 8px */ --bss-space-sm: 0.75rem; /* 12px */ --bss-space-md: 1rem; /* 16px */ --bss-space-lg: 1.5rem; /* 24px */ --bss-space-xl: 2rem; /* 32px */ --bss-space-2xl: 3rem; /* 48px */ --bss-space-3xl: 4rem; /* 64px */ --bss-space-4xl: 6rem; /* 96px */ /* --- Radius scale ---------------------------------------------------------- */ --bss-radius-2xs: 4px; --bss-radius-xs: 8px; --bss-radius-sm: 12px; --bss-radius-md: 16px; --bss-radius-lg: 22px; --bss-radius-xl: 28px; --bss-radius-2xl: 36px; --bss-radius-pill: 999px; /* --- Control sizing -------------------------------------------------------- */ --bss-control-sm: 36px; --bss-control-md: 44px; --bss-control-lg: 52px; --bss-tap-min: 44px; /* --- Focus ring geometry --------------------------------------------------- */ --bss-focus-width: 3px; --bss-focus-offset: 2px; --bss-focus-ring: 0 0 0 var(--bss-focus-width) var(--bss-ring); /* --- Motion ------------------------------------------------------------------ */ --bss-ease: cubic-bezier(0.22, 1, 0.36, 1); --bss-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --bss-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --bss-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --bss-dur-instant: 90ms; --bss-dur-fast: 150ms; --bss-dur: 220ms; --bss-dur-slow: 320ms; --bss-dur-slower: 480ms; /* --- Layering ------------------------------------------------------------------ */ --bss-z-base: 0; --bss-z-sticky: 100; --bss-z-drawer: 200; --bss-z-overlay: 300; --bss-z-modal: 400; --bss-z-popover: 500; --bss-z-toast: 600; --bss-z-tooltip: 700; --bss-z-max: 2147483000; } /* ========================================================================= DARK MODE — attribute driven (matches existing html[data-theme]) ========================================================================= */ html[data-theme="dark"] { color-scheme: dark; --bss-primary: var(--bss-blue-300); --bss-primary-strong: var(--bss-blue-200); --bss-primary-hover: #b9ceff; --bss-primary-hover: color-mix(in oklab, var(--bss-primary) 82%, var(--bss-white)); --bss-primary-active: #dbe7ff; --bss-primary-active: color-mix(in oklab, var(--bss-primary) 64%, var(--bss-white)); --bss-primary-soft: rgba(140, 176, 255, 0.14); --bss-primary-soft: color-mix(in oklab, var(--bss-primary) 14%, transparent); --bss-primary-subtle: rgba(140, 176, 255, 0.07); --bss-primary-subtle: color-mix(in oklab, var(--bss-primary) 7%, transparent); --bss-primary-muted: rgba(140, 176, 255, 0.28); --bss-primary-muted: color-mix(in oklab, var(--bss-primary) 28%, transparent); --bss-on-primary: var(--bss-charcoal-950); --bss-accent: var(--bss-purple-300); --bss-accent-strong: var(--bss-purple-200); --bss-accent-hover: #cdb8fb; --bss-accent-hover: color-mix(in oklab, var(--bss-accent) 82%, var(--bss-white)); --bss-accent-soft: rgba(176, 144, 246, 0.16); --bss-accent-soft: color-mix(in oklab, var(--bss-accent) 16%, transparent); --bss-accent-subtle: rgba(176, 144, 246, 0.08); --bss-accent-subtle: color-mix(in oklab, var(--bss-accent) 8%, transparent); --bss-on-accent: var(--bss-charcoal-950); --bss-success: var(--bss-emerald-300); --bss-success-contrast: var(--bss-charcoal-950); --bss-success-soft: rgba(79, 209, 165, 0.15); --bss-success-soft: color-mix(in oklab, var(--bss-success) 15%, transparent); --bss-warning: var(--bss-amber-300); --bss-warning-contrast: var(--bss-charcoal-950); --bss-warning-soft: rgba(240, 180, 96, 0.15); --bss-warning-soft: color-mix(in oklab, var(--bss-warning) 15%, transparent); --bss-danger: var(--bss-rose-300); --bss-danger-contrast: var(--bss-charcoal-950); --bss-danger-soft: rgba(255, 143, 153, 0.15); --bss-danger-soft: color-mix(in oklab, var(--bss-danger) 15%, transparent); --bss-info: var(--bss-blue-300); --bss-info-contrast: var(--bss-charcoal-950); --bss-info-soft: rgba(140, 176, 255, 0.15); --bss-info-soft: color-mix(in oklab, var(--bss-info) 15%, transparent); --bss-bg: var(--bss-charcoal-950); --bss-bg-soft: var(--bss-charcoal-900); --bss-canvas: var(--bss-charcoal-950); --bss-canvas-deep: #06070a; --bss-surface: var(--bss-charcoal-850); --bss-surface-raised: var(--bss-charcoal-800); --bss-surface-muted: var(--bss-charcoal-800); --bss-surface-sunken: var(--bss-charcoal-900); --bss-surface-overlay: rgba(16, 18, 22, 0.86); --bss-surface-inverse: var(--bss-grey-50); --bss-border: rgba(255, 255, 255, 0.10); --bss-border-subtle: rgba(255, 255, 255, 0.06); --bss-border-strong: rgba(255, 255, 255, 0.18); --bss-text: #f4f6fb; --bss-text-soft: #a7b0bf; --bss-text-faint: #79828f; --bss-text-inverse: var(--bss-charcoal-950); --bss-text-link: var(--bss-blue-300); --bss-ring: rgba(140, 176, 255, 0.55); --bss-ring: color-mix(in oklab, var(--bss-primary) 55%, transparent); --bss-glass-bg: rgba(21, 24, 29, 0.68); --bss-glass-border: rgba(255, 255, 255, 0.10); --bss-gradient-brand: linear-gradient(135deg, var(--bss-blue-400), var(--bss-purple-400)); --bss-gradient-brand-soft: linear-gradient(135deg, rgba(47, 111, 237, 0.16), rgba(122, 69, 224, 0.16)); --bss-gradient-sheen: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0)); --bss-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4); --bss-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.36), 0 4px 14px rgba(0, 0, 0, 0.34); --bss-shadow-md: 0 2px 6px rgba(0, 0, 0, 0.4), 0 14px 34px rgba(0, 0, 0, 0.44); --bss-shadow-lg: 0 6px 14px rgba(0, 0, 0, 0.42), 0 28px 64px rgba(0, 0, 0, 0.52); --bss-shadow-xl: 0 10px 22px rgba(0, 0, 0, 0.44), 0 44px 104px rgba(0, 0, 0, 0.6); --bss-shadow-primary: 0 10px 30px rgba(47, 111, 237, 0.32); --bss-shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.06); } /* ========================================================================= DARK MODE — OS preference (only when the page has not pinned a theme) ========================================================================= */ @media (prefers-color-scheme: dark) { html:not([data-theme="light"]):not([data-theme="dark"]) { color-scheme: dark; --bss-primary: var(--bss-blue-300); --bss-primary-strong: var(--bss-blue-200); --bss-primary-hover: #b9ceff; --bss-primary-hover: color-mix(in oklab, var(--bss-primary) 82%, var(--bss-white)); --bss-primary-active: #dbe7ff; --bss-primary-active: color-mix(in oklab, var(--bss-primary) 64%, var(--bss-white)); --bss-primary-soft: rgba(140, 176, 255, 0.14); --bss-primary-soft: color-mix(in oklab, var(--bss-primary) 14%, transparent); --bss-primary-subtle: rgba(140, 176, 255, 0.07); --bss-primary-subtle: color-mix(in oklab, var(--bss-primary) 7%, transparent); --bss-primary-muted: rgba(140, 176, 255, 0.28); --bss-primary-muted: color-mix(in oklab, var(--bss-primary) 28%, transparent); --bss-on-primary: var(--bss-charcoal-950); --bss-accent: var(--bss-purple-300); --bss-accent-strong: var(--bss-purple-200); --bss-accent-hover: #cdb8fb; --bss-accent-hover: color-mix(in oklab, var(--bss-accent) 82%, var(--bss-white)); --bss-accent-soft: rgba(176, 144, 246, 0.16); --bss-accent-soft: color-mix(in oklab, var(--bss-accent) 16%, transparent); --bss-accent-subtle: rgba(176, 144, 246, 0.08); --bss-accent-subtle: color-mix(in oklab, var(--bss-accent) 8%, transparent); --bss-on-accent: var(--bss-charcoal-950); --bss-success: var(--bss-emerald-300); --bss-success-contrast: var(--bss-charcoal-950); --bss-success-soft: rgba(79, 209, 165, 0.15); --bss-success-soft: color-mix(in oklab, var(--bss-success) 15%, transparent); --bss-warning: var(--bss-amber-300); --bss-warning-contrast: var(--bss-charcoal-950); --bss-warning-soft: rgba(240, 180, 96, 0.15); --bss-warning-soft: color-mix(in oklab, var(--bss-warning) 15%, transparent); --bss-danger: var(--bss-rose-300); --bss-danger-contrast: var(--bss-charcoal-950); --bss-danger-soft: rgba(255, 143, 153, 0.15); --bss-danger-soft: color-mix(in oklab, var(--bss-danger) 15%, transparent); --bss-info: var(--bss-blue-300); --bss-info-contrast: var(--bss-charcoal-950); --bss-info-soft: rgba(140, 176, 255, 0.15); --bss-info-soft: color-mix(in oklab, var(--bss-info) 15%, transparent); --bss-bg: var(--bss-charcoal-950); --bss-bg-soft: var(--bss-charcoal-900); --bss-canvas: var(--bss-charcoal-950); --bss-canvas-deep: #06070a; --bss-surface: var(--bss-charcoal-850); --bss-surface-raised: var(--bss-charcoal-800); --bss-surface-muted: var(--bss-charcoal-800); --bss-surface-sunken: var(--bss-charcoal-900); --bss-surface-overlay: rgba(16, 18, 22, 0.86); --bss-surface-inverse: var(--bss-grey-50); --bss-border: rgba(255, 255, 255, 0.10); --bss-border-subtle: rgba(255, 255, 255, 0.06); --bss-border-strong: rgba(255, 255, 255, 0.18); --bss-text: #f4f6fb; --bss-text-soft: #a7b0bf; --bss-text-faint: #79828f; --bss-text-inverse: var(--bss-charcoal-950); --bss-text-link: var(--bss-blue-300); --bss-ring: rgba(140, 176, 255, 0.55); --bss-ring: color-mix(in oklab, var(--bss-primary) 55%, transparent); --bss-glass-bg: rgba(21, 24, 29, 0.68); --bss-glass-border: rgba(255, 255, 255, 0.10); --bss-gradient-brand: linear-gradient(135deg, var(--bss-blue-400), var(--bss-purple-400)); --bss-gradient-brand-soft: linear-gradient(135deg, rgba(47, 111, 237, 0.16), rgba(122, 69, 224, 0.16)); --bss-gradient-sheen: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0)); --bss-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4); --bss-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.36), 0 4px 14px rgba(0, 0, 0, 0.34); --bss-shadow-md: 0 2px 6px rgba(0, 0, 0, 0.4), 0 14px 34px rgba(0, 0, 0, 0.44); --bss-shadow-lg: 0 6px 14px rgba(0, 0, 0, 0.42), 0 28px 64px rgba(0, 0, 0, 0.52); --bss-shadow-xl: 0 10px 22px rgba(0, 0, 0, 0.44), 0 44px 104px rgba(0, 0, 0, 0.6); --bss-shadow-primary: 0 10px 30px rgba(47, 111, 237, 0.32); --bss-shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.06); } } /* ========================================================================= Reduced motion — neutralize token-driven durations at the source ========================================================================= */ @media (prefers-reduced-motion: reduce) { :root { --bss-dur-instant: 0ms; --bss-dur-fast: 0ms; --bss-dur: 0ms; --bss-dur-slow: 0ms; --bss-dur-slower: 0ms; --bss-ease-spring: linear; } } /* ========================================================================= Forced colors — hand control to the OS palette ========================================================================= */ @media (forced-colors: active) { :root { --bss-shadow-xs: none; --bss-shadow-sm: none; --bss-shadow-md: none; --bss-shadow-lg: none; --bss-shadow-xl: none; --bss-shadow-primary: none; --bss-glass-blur: none; } }