/* ============================================================================ YFF Design System — Token Layer (Material 3 adapted) ============================================================================ Canonical source from: YFF design system and icons-handoff/yff-design-system-and-icons/project/design-system/yff-tokens.css This layer: - Defines all design tokens (colors, typography, spacing, motion, elevation) - Supports light/dark themes via [data-theme] attribute on - Uses CSS custom properties for runtime theme switching - Provides both M3 names (--md-*) and YFF names (--yff-*) - Maintains legacy aliases for backward compatibility Load order: This file FIRST, before any component styles. Theme switching: Set [data-theme="dark"] on at runtime. ============================================================================ */ :root, [data-theme="light"] { /* ── Color · primary (teal — interactive, from app.css --accent) ──────── */ --md-primary: #0e8f8b; --md-on-primary: #ffffff; --md-primary-container: #d5efed; --md-on-primary-container: #0b6b67; /* ── Color · secondary (YFF portal blue) ──────────────────────────────── */ --md-secondary: #2b388f; --md-on-secondary: #ffffff; --md-secondary-container: #e0e3f5; --md-on-secondary-container: #232e75; /* ── Color · tertiary (YFF orange — energy, countdowns, eyebrows) ────── */ --md-tertiary: #f69320; --md-on-tertiary: #ffffff; --md-tertiary-container: #fff3e3; --md-on-tertiary-container: #9a5a05; /* ── Color · brand surface (deep navy: logo, hero, dark surfaces) ────── */ --yff-brand: #0f2740; --yff-on-brand: #ffffff; /* ── Color · error / urgent ──────────────────────────────────────────── */ --md-error: #c2410c; --md-on-error: #ffffff; --md-error-container: #fbe7de; --md-on-error-container: #9a2c13; --yff-live: #e11d48; /* "now" marker, unread, urgent */ /* ── Color · success ──────────────────────────────────────────────────── */ --yff-success: #2f9e44; --yff-success-container: #e2f5e5; --yff-on-success-container: #1e6b2e; /* ── Color · surfaces ────────────────────────────────────────────────── */ --md-surface: #ffffff; --md-surface-dim: #e8eef5; --md-surface-container-lowest: #ffffff; --md-surface-container-low: #f4f7fb; --md-surface-container: #eef1f6; --md-surface-container-high: #e8eef5; --md-surface-container-highest: #e2e9f1; --md-on-surface: #15202c; --md-on-surface-variant: #647688; --md-on-surface-strong: #33475a; /* body copy on cards */ --md-outline: #7d8fa1; --md-outline-variant: #e4eaf2; --md-scrim: rgba(6,12,20,.5); --md-inverse-surface: #263543; --md-inverse-on-surface: #eef2f7; /* ── Elevation (M3 levels 0–5) ────────────────────────────────────────── */ --md-elev-0: none; --md-elev-1: 0 1px 2px rgba(16,32,52,.07), 0 1px 3px rgba(16,32,52,.05); --md-elev-2: 0 1px 2px rgba(16,32,52,.07), 0 2px 6px rgba(16,32,52,.06); --md-elev-3: 0 6px 22px rgba(16,32,52,.10), 0 2px 6px rgba(16,32,52,.06); --md-elev-4: 0 10px 28px rgba(16,32,52,.13), 0 3px 8px rgba(16,32,52,.07); --md-elev-5: 0 18px 44px rgba(16,32,52,.18), 0 6px 12px rgba(16,32,52,.08); --yff-elev-fab: 0 8px 22px rgba(14,143,139,.38); /* ── House identity (elemental) ─ bright tier ────────────────────────── `--house-x` = playful color (art, borders) `-container` = tint behind it `-ink` = text-safe tone on that tint `-soft` = highlight inside emblem art */ --house-water: #1d7ef5; --house-water-container: #dbeaff; --house-water-ink: #0b52b8; --house-water-soft: #8cc2ff; --house-wind: #8b5cf6; --house-wind-container: #ece4ff; --house-wind-ink: #6431d4; --house-wind-soft: #c9b0ff; --house-air: #23c4e8; --house-air-container: #d8f6fd; --house-air-ink: #0a7f97; --house-air-soft: #95e7f8; --house-earth: #35c05f; --house-earth-container: #dcf7e3; --house-earth-ink: #1c8b42; --house-earth-soft: #97e5ae; --house-pop: #ffd23f; /* ── Categorical palette (avatars, schedule blocks, chips) ───────────── */ --c-teal-bg:#e2f4f2; --c-teal-ln:#0e8f8b; --c-blue-bg:#e4eefb; --c-blue-ln:#2563ab; --c-purple-bg:#ece6f8; --c-purple-ln:#7c4dbe; --c-pink-bg:#fbe5f0; --c-pink-ln:#c2417c; --c-red-bg:#fbe3e3; --c-red-ln:#d03535; --c-orange-bg:#fdead9; --c-orange-ln:#e07020; --c-yellow-bg:#fcf2d3; --c-yellow-ln:#cf9c12; --c-green-bg:#e2f5e5; --c-green-ln:#2f9e44; --c-slate-bg:#e9eef3; --c-slate-ln:#5c6b7a; --c-lightblue-bg:#e0f1fb; --c-lightblue-ln:#2ba0dd; } [data-theme="dark"] { --md-primary: #34c0ba; --md-on-primary: #06211f; --md-primary-container: #123f3d; --md-on-primary-container: #8fe0dc; --md-secondary: #a9b3ee; --md-on-secondary: #1a2260; --md-secondary-container: #2b3585; --md-on-secondary-container: #dfe3fb; --md-tertiary: #f7b45f; --md-on-tertiary: #3d2500; --md-tertiary-container: #4a2f0a; --md-on-tertiary-container: #fbdcb0; --yff-brand: #0f2740; --yff-on-brand: #ffffff; --md-error: #f06a3a; --md-on-error: #3a1105; --md-error-container: #3a1e14; --md-on-error-container: #f6b79e; --yff-live: #ff5470; --yff-success: #57c46b; --yff-success-container: #123018; --yff-on-success-container: #b6ecc0; --md-surface: #131f2b; --md-surface-dim: #0b141d; --md-surface-container-lowest: #0b141d; --md-surface-container-low: #131f2b; --md-surface-container: #182634; --md-surface-container-high: #213141; --md-surface-container-highest: #27394a; --md-on-surface: #e9eff5; --md-on-surface-variant: #8ea0b3; --md-on-surface-strong: #c4d0dc; --md-outline: #7b8ea1; --md-outline-variant: #263543; --md-scrim: rgba(0,0,0,.62); --md-inverse-surface: #e9eff5; --md-inverse-on-surface: #182634; --md-elev-1: 0 1px 2px rgba(0,0,0,.4); --md-elev-2: 0 2px 6px rgba(0,0,0,.42); --md-elev-3: 0 8px 26px rgba(0,0,0,.5), 0 2px 6px rgba(0,0,0,.4); --md-elev-4: 0 12px 32px rgba(0,0,0,.55), 0 3px 8px rgba(0,0,0,.42); --md-elev-5: 0 20px 48px rgba(0,0,0,.6), 0 6px 14px rgba(0,0,0,.45); --yff-elev-fab: 0 8px 22px rgba(0,0,0,.5); --house-water: #74b1ff; --house-water-container: #0b2b52; --house-water-ink: #b8d8ff; --house-water-soft: #2f6fbf; --house-wind: #b79cff; --house-wind-container: #2a1d4d; --house-wind-ink: #dccdff; --house-wind-soft: #7a5cc4; --house-air: #6fdcf5; --house-air-container: #07344a; --house-air-ink: #b6ecfa; --house-air-soft: #2c8ba6; --house-earth: #6fdc90; --house-earth-container: #0d3a1c; --house-earth-ink: #bdf0cd; --house-earth-soft: #2f8f52; --house-pop: #ffd23f; --c-teal-bg:#0f302e; --c-teal-ln:#35bdb6; --c-blue-bg:#122840; --c-blue-ln:#5b9be0; --c-purple-bg:#23193a; --c-purple-ln:#a884e0; --c-pink-bg:#361628; --c-pink-ln:#e06aa0; --c-red-bg:#371616; --c-red-ln:#e86a6a; --c-orange-bg:#37230f; --c-orange-ln:#ea9450; --c-yellow-bg:#302809; --c-yellow-ln:#e0bb44; --c-green-bg:#123018; --c-green-ln:#57c46b; --c-slate-bg:#20303c; --c-slate-ln:#9aacbd; --c-lightblue-bg:#0e2c3e; --c-lightblue-ln:#5cc2ef; } /* ── Typography ───────────────────────────────────────────────────────────── */ :root { --md-font-display: 'Poppins', system-ui, sans-serif; --md-font-body: 'Hanken Grotesque', system-ui, sans-serif; /* Display & Headline (hero, screen titles) */ --md-display-lg: 800 40px/1.05 var(--md-font-display); --md-display-sm: 800 30px/1.1 var(--md-font-display); --md-headline: 800 22px/1.2 var(--md-font-display); /* Titles (cards, sections, lists) */ --md-title-lg: 700 18px/1.25 var(--md-font-display); --md-title-md: 700 15px/1.3 var(--md-font-display); --md-title-sm: 700 13px/1.35 var(--md-font-display); /* Body (main content, paragraphs) */ --md-body-lg: 500 15px/1.55 var(--md-font-body); --md-body-md: 500 13.5px/1.5 var(--md-font-body); --md-body-sm: 500 12px/1.45 var(--md-font-body); /* Labels (buttons, chips, tabs, form labels) */ --md-label-lg: 700 14px/1 var(--md-font-display); --md-label-md: 700 12.5px/1 var(--md-font-display); --md-label-sm: 700 11px/1 var(--md-font-display); /* Overline (uppercase labels, badges) */ --md-overline: 700 11px/1.2 var(--md-font-display); /* Letter spacing */ --md-track-tight: -.02em; /* display & headline */ --md-track-wide: .08em; /* overline / eyebrow */ } /* ── Shape (border radii) ──────────────────────────────────────────────────── */ :root { --md-shape-none: 0; --md-shape-xs: 4px; --md-shape-sm: 8px; --md-shape-md: 12px; /* inputs, small tiles */ --md-shape-lg: 16px; /* cards, sections */ --md-shape-xl: 28px; /* bottom sheets, hero cards */ --md-shape-full: 999px; /* buttons, chips, pills, avatars */ } /* ── Spacing (4px base grid) ───────────────────────────────────────────────── */ :root { --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; } /* ── Motion ────────────────────────────────────────────────────────────────── */ :root { --md-ease-standard: cubic-bezier(.2, 0, 0, 1); /* default transitions */ --md-ease-emphasized: cubic-bezier(.2, 0, 0, 1); /* focus, hover, active */ --md-ease-decelerate: cubic-bezier(0, 0, 0, 1); /* exit animations */ --md-ease-spring: cubic-bezier(.34, 1.56, .64, 1); /* celebratory only */ --md-dur-short: 150ms; --md-dur-medium: 250ms; --md-dur-long: 400ms; } /* ── State Layers (opacity applied over container) ──────────────────────────── */ :root { --md-state-hover: .08; --md-state-focus: .10; --md-state-pressed: .10; --md-state-drag: .16; --md-disabled-content: .38; --md-disabled-container: .12; } /* ── Target sizes (touch) ──────────────────────────────────────────────────── */ :root { --tap-min: 48px; /* M3 minimum; never below 44 */ --tap-dense: 40px; /* dense desktop rows only */ } /* ── Legacy aliases ───────────────────────────────────────────────────────── Existing selectors in app.css / portal-styles.css keep working unchanged while code migrates to --md-* and --yff-* names. DO NOT add new tokens here. New code should use the --md-* or --yff-* names. ============================================================================ */ :root, [data-theme="light"], [data-theme="dark"] { /* Color aliases */ --bg: var(--md-surface-container); --surface: var(--md-surface); --surface-2: var(--md-surface-container-low); --surface-3: var(--md-surface-container-high); --nav: var(--md-surface); --ink: var(--md-on-surface); --ink-2: var(--md-on-surface-strong); --muted: var(--md-on-surface-variant); --faint: var(--md-on-surface-variant); --line: var(--md-outline-variant); --line-2: var(--md-outline-variant); --brand: var(--yff-brand); --accent: var(--md-primary); --accent-ink: var(--md-on-primary-container); --accent-container: var(--md-primary-container); --warn: var(--md-error); --warn-bg: var(--md-error-container); --warn-ink: var(--md-on-error-container); --now: var(--yff-live); --shadow-1: var(--md-elev-1); --shadow-2: var(--md-elev-3); --shadow-fab: var(--yff-elev-fab); --shadow-nav: 0 -1px 0 var(--md-outline-variant); /* portal-styles.css & portal-extra.css compat */ --blue: var(--md-secondary); --blue-50: var(--md-secondary-container); --blue-100: var(--md-secondary-container); --blue-700: var(--md-on-secondary-container); --orange: var(--md-tertiary); --orange-600: var(--md-on-tertiary-container); --orange-soft: var(--md-tertiary-container); --teal: var(--md-primary); --teal-700: var(--md-on-primary-container); --teal-soft: var(--md-primary-container); --card: var(--md-surface); --radius: var(--md-shape-lg); --radius-sm: var(--md-shape-md); --radius-lg: var(--md-shape-xl); --font-display: var(--md-font-display); --font-body: var(--md-font-body); --ease: var(--md-ease-standard); --spring: var(--md-ease-spring); } /* ── Reduced Motion ────────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { * { animation-duration: .001ms !important; transition-duration: .001ms !important; } }