/* ============================================================================ SulyEye Ops - design tokens ---------------------------------------------------------------------------- The palette is the SulyEye mobile app's, ported verbatim: a signal blue held against cool graphite in dark mode and a cool mist paper in light mode. Every value below is lifted from lib/theme/app_colors.dart in the Flutter app, so the console and the phone read as one product rather than two. Components only ever use semantic tokens (--bg, --text, --brand ...). The raw ramp below is vocabulary, not API - rebranding means editing the ramp and leaving every component untouched. Mobile source of truth, for anyone reconciling the two: primary #0A7CFF primaryDeep #0057D8 primaryGlow #3D9BFF dark: bg #1E2328 surface #23282E text #E8EDF3 / #9BA6B2 / #6B7784 light: bg #E9EDF3 surface #EDF1F6 text #16202B / #5A6672 / #8A97A4 danger #E5342F success #22C55E warning #F5A524 ========================================================================== */ @layer tokens { :root { /* --- raw ramp: blue (the brand) ---------------------------------------- */ /* 400/500/600 are the mobile app's primaryGlow / primary / primaryDeep. */ --blue-50: #eaf3ff; --blue-100: #cfe4ff; --blue-200: #a8d0ff; --blue-300: #6fb2ff; --blue-400: #3d9bff; --blue-500: #0a7cff; --blue-600: #0057d8; --blue-700: #0043a8; --blue-800: #062a63; --blue-900: #041b40; /* --- raw ramp: lumen (the glow inside the iris) ------------------------ */ --lumen-300: #b3dcff; --lumen-400: #7cc0ff; --lumen-500: #3d9bff; /* --- raw ramp: amber ---------------------------------------------------- */ /* The mobile palette's only warm colour. Carries warnings, nothing else - calls to action are brand blue here, exactly as they are on the phone. */ --amber-300: #ffd48a; --amber-400: #f5a524; --amber-500: #d98c0a; --amber-600: #c97b06; /* --- raw ramp: mist (cool light neutrals) ------------------------------- */ --mist-50: #f5f8fc; --mist-100: #eff2f7; --mist-200: #edf1f6; --mist-300: #e9edf3; --mist-400: #e4e9f1; --mist-500: #dfe5ed; --mist-600: #d5dde8; /* --- raw ramp: slate (cool dark neutrals) ------------------------------- */ --slate-900: #16202b; --slate-800: #1e2328; --slate-700: #23282e; --slate-600: #2b3138; --slate-500: #5a6672; --slate-400: #8a97a4; --slate-300: #aab5c0; /* --- typography --------------------------------------------------------- */ --font-display: "Fraunces", "Noto Kufi Arabic", "Iowan Old Style", Georgia, serif; --font-sans: "Manrope", "Noto Sans Arabic", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, "Cascadia Mono", monospace; /* Fluid scale, 320px -> 1440px. The ratio widens as the screen grows so the display sizes earn real presence on desktop without wrapping on a phone. */ --step--2: clamp(0.69rem, 0.67rem + 0.11vw, 0.76rem); --step--1: clamp(0.83rem, 0.79rem + 0.19vw, 0.95rem); --step-0: clamp(1rem, 0.94rem + 0.29vw, 1.19rem); --step-1: clamp(1.2rem, 1.11rem + 0.44vw, 1.48rem); --step-2: clamp(1.44rem, 1.3rem + 0.68vw, 1.85rem); --step-3: clamp(1.73rem, 1.53rem + 1vw, 2.31rem); --step-4: clamp(2.07rem, 1.78rem + 1.45vw, 2.89rem); --step-5: clamp(2.49rem, 2.08rem + 2.06vw, 3.62rem); --step-6: clamp(2.99rem, 2.41rem + 2.87vw, 4.52rem); --step-7: clamp(3.58rem, 2.79rem + 3.97vw, 5.65rem); --leading-tight: 1.04; --leading-snug: 1.22; --leading-normal: 1.62; --tracking-tight: -0.025em; --tracking-wide: 0.14em; /* --- space --------------------------------------------------------------- */ --space-3xs: 0.25rem; --space-2xs: 0.5rem; --space-xs: 0.75rem; --space-s: 1rem; --space-m: 1.5rem; --space-l: 2.25rem; --space-xl: 3.5rem; --space-2xl: 5.5rem; --space-3xl: 8rem; --section-y: clamp(4.5rem, 3rem + 7vw, 9rem); /* --- radii ---------------------------------------------------------------- */ --radius-xs: 6px; --radius-s: 10px; --radius-m: 16px; --radius-l: 24px; --radius-xl: 34px; --radius-pill: 999px; /* --- layout ---------------------------------------------------------------- */ --shell: 78rem; --shell-narrow: 46rem; --gutter: clamp(1.25rem, 0.6rem + 3vw, 3rem); --header-h: 76px; /* --- motion ----------------------------------------------------------------- */ --ease-out-soft: cubic-bezier(0.22, 1, 0.36, 1); --ease-out-quart: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out-soft: cubic-bezier(0.65, 0, 0.35, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --dur-fast: 160ms; --dur-base: 320ms; --dur-slow: 620ms; --dur-reveal: 900ms; /* --- stacking ---------------------------------------------------------------- */ --z-canvas: 0; --z-raised: 10; --z-sticky: 100; --z-header: 200; --z-overlay: 300; --z-cursor: 400; } /* =========================================================================== LIGHT - cool mist paper, matching the mobile app's light theme. Deliberately not #fff: the app's light mode is neumorphic, so the page sits a step below its own cards and the plates read as raised rather than as cut-out holes. =========================================================================== */ :root { color-scheme: light; --bg: var(--mist-300); --bg-sunken: var(--mist-500); --surface: var(--mist-200); --surface-2: var(--mist-400); --surface-raised: var(--mist-50); --surface-invert: var(--slate-800); --text: var(--slate-900); --text-soft: var(--slate-500); --text-muted: var(--slate-400); --text-invert: var(--mist-50); --text-on-brand: #ffffff; --brand: var(--blue-500); --brand-strong: var(--blue-600); --brand-soft: var(--blue-50); --brand-ring: color-mix(in oklab, var(--blue-500) 38%, transparent); --lumen: var(--lumen-500); --accent: var(--blue-600); --accent-soft: #dbe9ff; --warn: var(--amber-600); --line: color-mix(in oklab, var(--slate-900) 11%, transparent); --line-strong: color-mix(in oklab, var(--slate-900) 20%, transparent); --line-faint: color-mix(in oklab, var(--slate-900) 6%, transparent); --shadow-s: 0 1px 2px color-mix(in oklab, var(--slate-900) 6%, transparent), 0 2px 8px color-mix(in oklab, var(--slate-900) 4%, transparent); --shadow-m: 0 2px 4px color-mix(in oklab, var(--slate-900) 5%, transparent), 0 12px 28px -8px color-mix(in oklab, var(--slate-900) 12%, transparent); --shadow-l: 0 4px 8px color-mix(in oklab, var(--slate-900) 5%, transparent), 0 30px 60px -18px color-mix(in oklab, var(--slate-900) 20%, transparent); --shadow-brand: 0 18px 40px -18px color-mix(in oklab, var(--blue-600) 55%, transparent); --glass: color-mix(in oklab, #ffffff 72%, transparent); --glass-line: color-mix(in oklab, var(--slate-900) 8%, transparent); --grain-opacity: 0.035; --aurora-1: color-mix(in oklab, var(--blue-300) 62%, transparent); --aurora-2: color-mix(in oklab, var(--lumen-400) 46%, transparent); --aurora-3: color-mix(in oklab, var(--blue-200) 46%, transparent); --iris-core: var(--blue-600); --iris-glow: var(--lumen-400); --hairline-grid: color-mix(in oklab, var(--slate-900) 5%, transparent); } /* =========================================================================== DARK - the mobile app's cool graphite rather than neutral black, so the blue reads as part of the room instead of a sticker stuck on top of it. --brand stays --blue-500 in both themes because the app keeps `primary` constant across its light and dark palettes; --accent is the app's lighter `accent` (#3D9BFF), which is what keeps the two distinguishable here. =========================================================================== */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --bg: #1e2328; --bg-sunken: #191d21; --surface: #23282e; --surface-2: #20252b; --surface-raised: #272d33; --surface-invert: var(--mist-50); --text: #e8edf3; --text-soft: #9ba6b2; --text-muted: #6b7784; --text-invert: var(--slate-900); --text-on-brand: #ffffff; --brand: var(--blue-500); --brand-strong: var(--blue-400); --brand-soft: color-mix(in oklab, var(--blue-500) 18%, transparent); --brand-ring: color-mix(in oklab, var(--blue-400) 42%, transparent); --lumen: var(--lumen-400); --accent: var(--blue-400); --accent-soft: color-mix(in oklab, var(--blue-500) 18%, transparent); --warn: var(--amber-400); --line: color-mix(in oklab, #ffffff 12%, transparent); --line-strong: color-mix(in oklab, #ffffff 22%, transparent); --line-faint: color-mix(in oklab, #ffffff 7%, transparent); --shadow-s: 0 1px 2px rgb(0 0 0 / 0.5); --shadow-m: 0 2px 6px rgb(0 0 0 / 0.45), 0 16px 34px -12px rgb(0 0 0 / 0.65); --shadow-l: 0 6px 12px rgb(0 0 0 / 0.4), 0 40px 70px -22px rgb(0 0 0 / 0.8); --shadow-brand: 0 20px 50px -22px color-mix(in oklab, var(--lumen-500) 60%, transparent); --glass: color-mix(in oklab, #1e2328 68%, transparent); --glass-line: color-mix(in oklab, #ffffff 10%, transparent); --grain-opacity: 0.05; --aurora-1: color-mix(in oklab, var(--blue-500) 58%, transparent); --aurora-2: color-mix(in oklab, var(--lumen-500) 40%, transparent); --aurora-3: color-mix(in oklab, var(--blue-400) 20%, transparent); --iris-core: var(--blue-400); --iris-glow: var(--lumen-400); --hairline-grid: color-mix(in oklab, #ffffff 5%, transparent); } } /* An explicit choice always beats the system preference, in both directions. */ :root[data-theme="dark"] { color-scheme: dark; --bg: #1e2328; --bg-sunken: #191d21; --surface: #23282e; --surface-2: #20252b; --surface-raised: #272d33; --surface-invert: var(--mist-50); --text: #e8edf3; --text-soft: #9ba6b2; --text-muted: #6b7784; --text-invert: var(--slate-900); --text-on-brand: #ffffff; --brand: var(--blue-500); --brand-strong: var(--blue-400); --brand-soft: color-mix(in oklab, var(--blue-500) 18%, transparent); --brand-ring: color-mix(in oklab, var(--blue-400) 42%, transparent); --lumen: var(--lumen-400); --accent: var(--blue-400); --accent-soft: color-mix(in oklab, var(--blue-500) 18%, transparent); --warn: var(--amber-400); --line: color-mix(in oklab, #ffffff 12%, transparent); --line-strong: color-mix(in oklab, #ffffff 22%, transparent); --line-faint: color-mix(in oklab, #ffffff 7%, transparent); --shadow-s: 0 1px 2px rgb(0 0 0 / 0.5); --shadow-m: 0 2px 6px rgb(0 0 0 / 0.45), 0 16px 34px -12px rgb(0 0 0 / 0.65); --shadow-l: 0 6px 12px rgb(0 0 0 / 0.4), 0 40px 70px -22px rgb(0 0 0 / 0.8); --shadow-brand: 0 20px 50px -22px color-mix(in oklab, var(--lumen-500) 60%, transparent); --glass: color-mix(in oklab, #1e2328 68%, transparent); --glass-line: color-mix(in oklab, #ffffff 10%, transparent); --grain-opacity: 0.05; --aurora-1: color-mix(in oklab, var(--blue-500) 58%, transparent); --aurora-2: color-mix(in oklab, var(--lumen-500) 40%, transparent); --aurora-3: color-mix(in oklab, var(--blue-400) 20%, transparent); --iris-core: var(--blue-400); --iris-glow: var(--lumen-400); --hairline-grid: color-mix(in oklab, #ffffff 5%, transparent); } /* =========================================================================== Script-aware typography. Arabic-script Kurdish sits lower on the line and needs more leading than Latin at the same nominal size, and letter-spacing actively breaks the joins between letters - so the scale is nudged globally rather than patched element by element. =========================================================================== */ :root[dir="rtl"] { --font-display: "Noto Kufi Arabic", "Fraunces", serif; --font-sans: "Noto Sans Arabic", "Manrope", ui-sans-serif, system-ui, sans-serif; --leading-tight: 1.3; --leading-snug: 1.46; --leading-normal: 1.9; --tracking-tight: 0; --tracking-wide: 0; } }