/* ============================================================ East Voyager Academy - Design Tokens Material 3 Expressive system, tuned to EVA's brand. Light scheme on :root, dark scheme on [data-theme="dark"] (rendered server-side on by App\Core\Theme - light by default, dark only for a saved cookie/user preference - and flipped instantly by the header toggle; see app.js). Two tiers: 1. --md-* role tokens (the Material system - use for new work) 2. Legacy tokens (--bg, --surface, --text, ...) kept as per-theme aliases so every existing component re-tones automatically. Brand constants (--eva-navy, --eva-orange) never flip - they are identity, not surfaces. Reference: /styles.htm (Brand + Color sections). ============================================================ */ :root { color-scheme: light; /* ── Material roles: primary (EVA navy family) ─────────── */ --md-primary: #003070; --md-on-primary: #FFFFFF; --md-primary-container: #D6E2FF; --md-on-primary-container: #001B3D; /* ── Material roles: secondary (slate-blue support) ────── */ --md-secondary: #555F71; --md-on-secondary: #FFFFFF; --md-secondary-container: #D9E3F8; --md-on-secondary-container: #121C2B; /* ── Material roles: tertiary (EVA orange family) ──────── */ --md-tertiary: #A63C00; --md-on-tertiary: #FFFFFF; --md-tertiary-container: #FFDBC8; --md-on-tertiary-container: #380D00; /* ── Material roles: error ─────────────────────────────── */ --md-error: #BA1A1A; --md-on-error: #FFFFFF; --md-error-container: #FFDAD6; --md-on-error-container: #410002; /* ── Material roles: surfaces (warm neutral ramp) ──────── */ --md-surface: #FBF9F6; --md-surface-container-lowest: #FFFFFF; --md-surface-container-low: #F5F3EE; --md-surface-container: #EFEDE7; --md-surface-container-high: #E9E7E1; --md-surface-container-highest: #E3E1DB; --md-on-surface: #1C1B18; --md-on-surface-variant: #47463F; --md-outline: #787770; --md-outline-variant: #C8C6BD; --md-inverse-surface: #313029; --md-inverse-on-surface: #F4F1EA; --md-inverse-primary: #AAC7FF; --md-scrim: rgba(0, 0, 0, .4); /* ── Brand constants (identity - never flip per theme) ─── */ --eva-navy: #003070; --eva-orange: #f1620a; --eva-navy-dark: #002050; --eva-navy-light: #1a4a8a; --eva-orange-light: #ff8343; /* ── Legacy aliases: UI surfaces ────────────────────────── */ --bg: var(--md-surface); --surface: var(--md-surface-container-lowest); --surface-alt: var(--md-surface-container-low); --text: var(--md-on-surface); --text-muted: #6B6B63; --text-light: #9C9C92; --border: #E5E3DC; --border-light: #EDEBE5; --input-border: #9C9686; /* ── Accent ─────────────────────────────────────────────── */ --accent: #D4A853; --accent-light: #FFF9ED; /* ── Subject colors (solid + container tint pairs) ─────── */ --chinese: #C0392B; --chinese-c: #FADBD8; --math: #2D5BA9; --math-c: #D9E4F5; --science: #1D8348; --science-c: #D3EFDE; --ela: #9B4DCA; --ela-c: #EEDFF7; --social: #C0792A; --social-c: #F7E8D4; --arts: #8E44AD; --arts-c: #EBDDF1; /* ── Semantic (solid + container tint pairs) ───────────── */ --success: #1D8348; --success-c: #D3EFDE; --warning: #8a6a00; --warning-c: #FBEFC9; --error: #BA1A1A; --error-c: #FFDAD6; --info: #21618C; --info-c: #D6EAF8; /* ── Material role aliases for the semantic set above ──── (--md-success/warning/info + containers) so components ported from styles.htm can reference --md-* uniformly. Defined once here via var() — the light/dark values above already flip per-theme, and these follow. ────── */ --md-success: var(--success); --md-success-container: var(--success-c); --md-warning: var(--warning); --md-warning-container: var(--warning-c); --md-info: var(--info); --md-info-container: var(--info-c); /* ── Spacing & Shape (Material scale) ───────────────────── */ --radius: 16px; --radius-sm: 10px; --radius-lg: 24px; --radius-full: 999px; /* Material shape scale (styles.htm) - used by the ported .field/.m-btn/.mcard/.chip component layer in app.css / eva-forms.css. Kept distinct from --radius-* above since the two scales don't map 1:1. */ --shape-xs: 4px; --shape-sm: 8px; --shape-md: 12px; --shape-lg: 16px; --shape-xl: 28px; --shape-full: 999px; /* ── Shadows (Material elevation) ───────────────────────── */ --shadow: 0 1px 2px rgba(0, 0, 0, .10), 0 1px 3px 1px rgba(0, 0, 0, .06); --shadow-lg: 0 1px 2px rgba(0, 0, 0, .12), 0 2px 6px 2px rgba(0, 0, 0, .08); --shadow-xl: 0 4px 8px 3px rgba(0, 0, 0, .10), 0 1px 3px rgba(0, 0, 0, .14); /* Elevation aliases (styles.htm naming) - same var()-alias trick as --md-success etc above, so dark mode re-tones automatically without a second definition. */ --elev-1: var(--shadow); --elev-2: var(--shadow-lg); --elev-3: var(--shadow-xl); /* ── Typography ─────────────────────────────────────────── */ /* Noto Sans/Newsreader chosen for a bilingual, mobile-first campus - the Noto Sans/Serif SC fallbacks mean Chinese content (subject labels, public academics copy, Digital Forms) renders in a font actually chosen for it, not whatever CJK font the visitor's OS happens to substitute. --font-mono (IBM Plex Mono) is new: numerals, chart labels, data. See /styles.htm (Type section) for the full rationale. */ --font-body: 'Noto Sans', 'Noto Sans SC', system-ui, sans-serif; --font-display: 'Newsreader', 'Noto Serif SC', Georgia, serif; --font-mono: 'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace; /* ── Motion ─────────────────────────────────────────────── */ --ease-emphasized: cubic-bezier(.2, 0, 0, 1); --transition: all .2s ease; --dur-short: 180ms; --dur-medium: 320ms; } /* ============================================================ DARK SCHEME ============================================================ */ [data-theme="dark"] { color-scheme: dark; --md-primary: #AAC7FF; --md-on-primary: #002F65; --md-primary-container: #1C4685; --md-on-primary-container: #D6E2FF; --md-secondary: #BDC7DC; --md-on-secondary: #273141; --md-secondary-container: #3E4758; --md-on-secondary-container: #D9E3F8; --md-tertiary: #FFB68E; --md-on-tertiary: #571F00; --md-tertiary-container: #7C2F00; --md-on-tertiary-container: #FFDBC8; --md-error: #FFB4AB; --md-on-error: #690005; --md-error-container: #93000A; --md-on-error-container: #FFDAD6; --md-surface: #131311; --md-surface-container-lowest: #1B1B18; --md-surface-container-low: #1F1F1C; --md-surface-container: #24241F; --md-surface-container-high: #2A2A26; --md-surface-container-highest: #353530; --md-on-surface: #E5E2DB; --md-on-surface-variant: #C8C6BD; --md-outline: #92908A; --md-outline-variant: #47463F; --md-inverse-surface: #E5E2DB; --md-inverse-on-surface: #313029; --md-inverse-primary: #2A5CA8; --md-scrim: rgba(0, 0, 0, .6); /* Brand accents brighten for contrast on dark, identity intact */ --eva-orange-light: #ffa06b; /* Legacy aliases re-point down the dark ramp */ --text-muted: #B5B3AB; --text-light: #8A887F; --border: #47463F; --border-light: #35342E; --input-border: #6B6960; --accent: #E0BC72; --accent-light: #3A3320; --chinese: #F1948A; --chinese-c: #4A1712; --math: #85A9E0; --math-c: #16294A; --science: #7CD9A5; --science-c: #0E4A28; --ela: #C39BD3; --ela-c: #3B1D4E; --social: #E0A96D; --social-c: #4A2F10; --arts: #BB8FCE; --arts-c: #371A44; --success: #7CD9A5; --success-c: #0E4A28; --warning: #E9C46A; --warning-c: #4A3A00; --error: #FFB4AB; --error-c: #93000A; --info: #85C1E9; --info-c: #143D57; --shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 1px 3px 1px rgba(0, 0, 0, .25); --shadow-lg: 0 1px 2px rgba(0, 0, 0, .40), 0 2px 6px 2px rgba(0, 0, 0, .30); --shadow-xl: 0 4px 8px 3px rgba(0, 0, 0, .35), 0 1px 3px rgba(0, 0, 0, .40); } /* ── Global Reset ───────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; /* Fluid, universal type scale: html's own font-size scales with viewport instead of a fixed value, so every rem-based size on the site - body copy, labels, table text - grows together on large screens instead of staying pinned to a phone-sized default. Min 16px (unchanged below ~400px), max 19px (~1600px+). See /styles.htm (Type > Fluid, universal scale). */ font-size: clamp(16px, 15px + .25vw, 19px); } body { font-family: var(--font-body); background: var(--bg); color: var(--text); line-height: 1.6; -webkit-font-smoothing: antialiased; margin: 0; transition: background .3s var(--ease-emphasized), color .3s var(--ease-emphasized); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } body { transition: none; } }