/* ============================================================================ TEWRIS — DESIGN TOKENS (single source of truth) ---------------------------------------------------------------------------- Tier 0 · FOUNDATION shared brand primitives (palette, fonts, radii, viz) Tier 1 · PRESENTATION the marketing/landing showcase consumes these Tier 2 · PRODUCT/APP functional tokens for dense, long-session data UI activated by [data-tier="product"] (calm-dark) Every value below is a CSS custom property so the whole file maps 1:1 to tokens.json and rebuilds cleanly into React + CSS-modules. No component ever hardcodes a hex — if a value is missing, add a token. ============================================================================ */ /* Fonts are loaded by the page with preconnect + only the weights in use. */ /* ========================================================================== */ /* TIER 0 — FOUNDATION (brand primitives, shared by every tier) */ /* ========================================================================== */ :root { /* — Brand surfaces (the original navy stack) — */ --bg: rgb(19, 22, 43); --bg-deep: rgb(13, 15, 32); --surface-1: rgb(32, 36, 68); --surface-2: rgb(38, 44, 73); --surface-3: rgb(50, 63, 97); --surface-4: rgb(66, 79, 115); --hairline: rgba(255, 255, 255, 0.10); --hairline-2: rgba(255, 255, 255, 0.05); --border: rgb(55, 62, 110); /* — Brand text — */ --text: rgb(255, 255, 255); --text-muted: rgb(136, 143, 171); --text-faint: rgba(255, 255, 255, 0.45); --text-dim: rgba(185, 219, 255, 0.70); /* — Brand accents — */ --cyan: rgb(46, 253, 241); --cyan-soft: rgb(90, 234, 217); --blue: rgb(46, 154, 253); --blue-2: rgb(36, 143, 255); --blue-3: rgb(46, 216, 253); --blue-light: rgb(185, 219, 255); --pink: rgb(255, 129, 184); --pink-2: rgb(255, 94, 181); --magenta: rgb(249, 94, 215); --purple: rgb(136, 108, 200); /* — Data-viz categorical palette (charts use ONLY these) — */ --viz-1: rgb(124, 238, 122); --viz-2: rgb(94, 119, 249); --viz-3: rgb(214, 105, 105); --viz-4: rgb(212, 130, 204); --viz-5: rgb(114, 220, 235); --viz-6: rgb(85, 238, 211); --viz-7: rgb(255, 129, 184); --viz-8: rgb(137, 226, 140); /* — Radii — */ --r-xs: 6px; --r-sm: 12px; --r-md: 16px; --r-lg: 20px; --r-pill: 999px; /* — Type families — */ --font-sans: "Raleway", system-ui, sans-serif; /* brand / display */ --font-display: "Raleway", system-ui, sans-serif; /* alias */ --font-ui: "Inter", system-ui, sans-serif; /* product UI text */ --font-mono: "JetBrains Mono", ui-monospace, monospace; /* — Neon glow (ACCENT ONLY — never the default elevation in product) — */ --glow-cyan: 0 0 4px var(--cyan); --glow-pink: 0 0 10px rgba(136, 108, 200, 0.6); --glow-blue: 0 6px 24px -8px rgba(36, 143, 255, 0.6); /* ======================================================================== */ /* FUNCTIONAL — SPACING (4px base scale) */ /* ======================================================================== */ --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 40px; --space-9: 48px; --space-10: 64px; --space-11: 80px; --space-12: 96px; /* ======================================================================== */ /* FUNCTIONAL — NEUTRAL GRAY RAMP (cool / navy-tinted, for dense UI) */ /* ======================================================================== */ --gray-50: rgb(238, 241, 248); --gray-100: rgb(214, 220, 234); --gray-200: rgb(179, 188, 210); --gray-300: rgb(143, 154, 182); --gray-400: rgb(111, 122, 152); --gray-500: rgb(84, 93, 120); --gray-600: rgb(62, 70, 92); --gray-700: rgb(45, 52, 71); --gray-800: rgb(31, 36, 51); --gray-900: rgb(20, 24, 38); /* ======================================================================== */ /* FUNCTIONAL — TYPE SCALE (roles, with size / line-height / weight / track)*/ /* UI roles use --font-ui (Inter); display uses --font-display (Raleway) */ /* ======================================================================== */ --text-display-font: var(--font-display); --text-display-size: 44px; --text-display-line: 1.1; --text-display-weight: 300; --text-display-track: -0.01em; --text-h1-font: var(--font-ui); --text-h1-size: 30px; --text-h1-line: 1.25; --text-h1-weight: 600; --text-h1-track: -0.01em; --text-h2-font: var(--font-ui); --text-h2-size: 24px; --text-h2-line: 1.3; --text-h2-weight: 600; --text-h2-track: -0.005em; --text-h3-font: var(--font-ui); --text-h3-size: 20px; --text-h3-line: 1.35; --text-h3-weight: 600; --text-h3-track: 0; --text-h4-font: var(--font-ui); --text-h4-size: 16px; --text-h4-line: 1.4; --text-h4-weight: 600; --text-h4-track: 0; --text-body-font: var(--font-ui); --text-body-size: 14px; --text-body-line: 1.55; --text-body-weight: 400; --text-body-track: 0; --text-body-sm-font: var(--font-ui); --text-body-sm-size: 13px; --text-body-sm-line: 1.5; --text-body-sm-weight: 400; --text-body-sm-track: 0; --text-caption-font: var(--font-ui); --text-caption-size: 12px; --text-caption-line: 1.4; --text-caption-weight: 500; --text-caption-track: 0.02em; --text-code-font: var(--font-mono); --text-code-size: 13px; --text-code-line: 1.5; --text-code-weight: 400; --text-code-track: 0; /* ======================================================================== */ /* FUNCTIONAL — Z-INDEX SCALE */ /* ======================================================================== */ --z-base: 0; /* @kind other */ --z-dropdown: 1000; /* @kind other */ --z-sticky: 1100; /* @kind other */ --z-overlay: 1200; /* @kind other */ --z-popover: 1250; /* @kind other */ --z-modal: 1300; /* @kind other */ --z-toast: 1400; /* @kind other */ /* ======================================================================== */ /* FUNCTIONAL — MOTION */ /* ======================================================================== */ --ease: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */ --ease-out: cubic-bezier(0, 0, 0.2, 1); /* @kind other */ --dur-fast: 120ms; /* @kind other */ --dur: 180ms; /* @kind other */ --dur-slow: 260ms; /* @kind other */ } /* ========================================================================== */ /* TIER 2 — PRODUCT / APP THEME (calm-dark: higher contrast, glow dampened) */ /* Apply [data-tier="product"] to a wrapper (or ) to enter the tier. */ /* Semantic + interaction tokens live here so the brand foundation stays */ /* untouched and shared. */ /* ========================================================================== */ [data-tier="product"] { color-scheme: dark; /* — Surfaces (calm-dark, derived from the gray ramp) — */ --app-bg: var(--gray-900); --app-surface: rgb(26, 31, 46); /* panels / cards */ --app-surface-2: rgb(33, 39, 56); /* raised rows, inputs */ --app-surface-3: rgb(42, 49, 69); /* hover / selected */ --app-overlay-bg: rgb(30, 35, 51); /* menus, popovers, modals */ --app-border: rgb(48, 56, 78); /* default 1px divider */ --app-border-strong: rgb(66, 76, 102); --app-hairline: rgba(255, 255, 255, 0.06); /* — Text (calm-dark raises muted contrast to pass AA on app-bg) — */ --app-text: rgb(233, 237, 247); /* ~13.5:1 on app-bg */ --app-text-muted: rgb(165, 174, 198); /* ~7.0:1 — AA normal */ --app-text-subtle: rgb(130, 139, 165); /* ~4.6:1 — AA normal (borderline-safe) */ --app-text-faint: rgb(102, 111, 138); /* non-text / decorative only */ --app-text-invert: var(--gray-900); /* text on bright fills (cyan) */ /* — Interactive (primary action) — */ --app-accent: var(--blue); --app-accent-hover: rgb(74, 173, 255); --app-accent-active: rgb(28, 128, 232); --app-accent-fg: #ffffff; /* use ≥14px bold OR large text — see contrast report */ --app-accent-quiet: rgba(46, 154, 253, 0.14); /* — Semantic: SUCCESS / WARNING / ERROR / INFO (each fg / bg / border / solid) — */ --success: rgb(47, 208, 122); --success-fg: rgb(122, 240, 176); --success-bg: rgba(47, 208, 122, 0.12); --success-border: rgba(47, 208, 122, 0.38); --warning: rgb(245, 181, 69); --warning-fg: rgb(255, 210, 122); --warning-bg: rgba(245, 181, 69, 0.12); --warning-border: rgba(245, 181, 69, 0.38); --error: rgb(255, 93, 108); --error-fg: rgb(255, 138, 148); --error-bg: rgba(255, 93, 108, 0.12); --error-border: rgba(255, 93, 108, 0.40); --info: rgb(46, 154, 253); --info-fg: rgb(116, 185, 255); --info-bg: rgba(46, 154, 253, 0.12); --info-border: rgba(46, 154, 253, 0.38); /* — Focus ring (visible, AA-contrast, theme-independent) — */ --focus-ring-color: rgb(90, 184, 255); --focus-ring-width: 2px; --focus-ring-offset: 2px; --focus-ring: 0 0 0 var(--focus-ring-offset) var(--app-bg), 0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width)) var(--focus-ring-color); /* — Disabled — */ --disabled-opacity: 0.45; /* @kind other */ --disabled-bg: var(--gray-700); --disabled-fg: var(--gray-400); --disabled-border: var(--gray-600); /* — Elevation (neutral overlay shadows — NOT neon glow) — */ --elevation-0: none; --elevation-1: 0 1px 2px rgba(0, 0, 0, 0.35); --elevation-2: 0 4px 10px -2px rgba(0, 0, 0, 0.45); --elevation-3: 0 10px 24px -6px rgba(0, 0, 0, 0.50); --elevation-4: 0 18px 40px -10px rgba(0, 0, 0, 0.55); --elevation-5: 0 28px 60px -12px rgba(0, 0, 0, 0.60); /* overlays pair elevation with a 1px ring for crisp edges on dark bg */ --overlay-ring: 0 0 0 1px var(--app-border-strong); /* — Control radii (product uses tighter corners than marketing) — */ --app-r-sm: 6px; --app-r-md: 8px; --app-r-lg: 12px; /* — Highlight (search-match mark) — */ --app-mark-bg: rgba(46, 216, 253, 0.22); --app-mark-fg: var(--app-text); /* — DENSITY — defaults to comfortable; [data-density="compact"] overrides — */ --control-h: 40px; /* buttons, inputs, selects */ --control-h-sm: 32px; --control-px: 14px; /* horizontal padding inside controls */ --row-h: 48px; /* data-table row */ --cal-cell: 36px; /* calendar day cell */ --progress-h: 8px; /* linear progress track height */ --field-gap: var(--space-2); --stack-gap: var(--space-4); --card-pad: var(--space-6); } /* Compact density — same tokens, tighter values */ [data-tier="product"][data-density="compact"], [data-density="compact"] [data-tier="product"], [data-tier="product"] [data-density="compact"] { --control-h: 32px; --control-h-sm: 26px; --control-px: 10px; --row-h: 36px; --cal-cell: 30px; --progress-h: 6px; --field-gap: var(--space-1); --stack-gap: var(--space-3); --card-pad: var(--space-4); } /* Reduced-motion: respect the OS setting everywhere */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } } /* ========================================================================== */ /* TYPE-ROLE UTILITIES (work in any tier) */ /* ========================================================================== */ .ptype-display { font-family: var(--text-display-font); font-size: var(--text-display-size); line-height: var(--text-display-line); font-weight: var(--text-display-weight); letter-spacing: var(--text-display-track); } .ptype-h1 { font-family: var(--text-h1-font); font-size: var(--text-h1-size); line-height: var(--text-h1-line); font-weight: var(--text-h1-weight); letter-spacing: var(--text-h1-track); } .ptype-h2 { font-family: var(--text-h2-font); font-size: var(--text-h2-size); line-height: var(--text-h2-line); font-weight: var(--text-h2-weight); letter-spacing: var(--text-h2-track); } .ptype-h3 { font-family: var(--text-h3-font); font-size: var(--text-h3-size); line-height: var(--text-h3-line); font-weight: var(--text-h3-weight); letter-spacing: var(--text-h3-track); } .ptype-h4 { font-family: var(--text-h4-font); font-size: var(--text-h4-size); line-height: var(--text-h4-line); font-weight: var(--text-h4-weight); letter-spacing: var(--text-h4-track); } .ptype-body { font-family: var(--text-body-font); font-size: var(--text-body-size); line-height: var(--text-body-line); font-weight: var(--text-body-weight); } .ptype-body-sm { font-family: var(--text-body-sm-font); font-size: var(--text-body-sm-size); line-height: var(--text-body-sm-line); font-weight: var(--text-body-sm-weight); } .ptype-caption { font-family: var(--text-caption-font); font-size: var(--text-caption-size); line-height: var(--text-caption-line); font-weight: var(--text-caption-weight); letter-spacing: var(--text-caption-track); } .ptype-code { font-family: var(--text-code-font); font-size: var(--text-code-size); line-height: var(--text-code-line); font-weight: var(--text-code-weight); } /* Bring component styles into the global closure */ @import url("components.css");