/* ── FONT LOADING ───────────────────────────────────────── EB Garamond from Google Fonts as web fallback for display. Rotis Semi Serif: brand display font (AGFA licensed). Regular weight loaded from /design-system/fonts/. Segoe UI: system font — no files needed. ──────────────────────────────────────────────────────── */ @import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;1,400&display=swap'); @font-face { font-family: 'Rotis Semi Serif'; src: url('fonts/rotis-semi-serif-regular.woff2') format('woff2'); font-weight: 400 500; font-style: normal; font-display: swap; } /** * ============================================================ * SMILE v2 — Design Tokens * St Mary's School Ascot * ============================================================ * * THIS IS THE SINGLE SOURCE OF TRUTH FOR ALL VISUAL DESIGN. * * Every app, every portal, every component imports this file. * To change a colour, font, or spacing across the ENTIRE * system — change it here. Nowhere else. * * Last updated: 2026 * ============================================================ */ :root { /* ── BRAND COLOURS ────────────────────────────────────── Source: St Mary's School Ascot Brand Guidelines ─────────────────────────────────────────────────────── */ /* Tangaroa — Primary Navy */ --color-navy: #041E42; --color-navy-deep: #020f22; /* sidebar, darkest surfaces */ --color-navy-mid: #0a2d5e; /* hover states, mid surfaces */ --color-navy-lift: #0d3570; /* lightest navy tint */ /* Tallow — Gold/Champagne Accent */ --color-gold: #A8996E; /* brand gold — exact from guidelines */ --color-gold-light: #c4b58a; /* lighter gold for hover */ --color-gold-bright: #d4c48a; /* text on dark navy — passes contrast */ --color-gold-muted: #7a6e50; /* gold on white — readable */ --color-gold-subtle: rgba(168,153,110,0.12); /* tinted backgrounds */ /* Periwinkle — Secondary Blue */ --color-periwinkle: #CBD3EB; /* exact from guidelines */ --color-periwinkle-mid:#a0aece; /* slightly deeper */ --color-periwinkle-dim:rgba(203,211,235,0.62); /* idle sidebar text */ /* Quartz — Neutral Grey */ --color-quartz: #D5D5D8; /* exact from guidelines */ /* White */ --color-white: #FFFFFF; /* ── SCHOOL HOUSES ────────────────────────────────────── Seven houses — each with primary, light bg, dark text, and a subtle border tone. Curated to complement the navy / gold / periwinkle brand palette. ─────────────────────────────────────────────────────── */ /* Babthorpe — Saffron Amber (Yellow / Bee) */ --house-babthorpe: #C9A227; --house-babthorpe-light: rgba(201,162,39,0.10); --house-babthorpe-pale: rgba(201,162,39,0.18); --house-babthorpe-dark: #8C6F18; --house-babthorpe-border: rgba(201,162,39,0.30); /* Bedingfeld — Forest Sage (Green) */ --house-bedingfeld: #3A8A5C; --house-bedingfeld-light: rgba(58,138,92,0.10); --house-bedingfeld-pale: rgba(58,138,92,0.18); --house-bedingfeld-dark: #266240; --house-bedingfeld-border: rgba(58,138,92,0.30); /* Wigmore — Royal Blue (Blue / Wombat) */ --house-wigmore: #3E6DB3; --house-wigmore-light: rgba(62,109,179,0.10); --house-wigmore-pale: rgba(62,109,179,0.18); --house-wigmore-dark: #274A80; --house-wigmore-border: rgba(62,109,179,0.30); /* Rookwood — Amethyst (Purple / Rhino) */ --house-rookwood: #7B5DAF; --house-rookwood-light: rgba(123,93,175,0.10); --house-rookwood-pale: rgba(123,93,175,0.18); --house-rookwood-dark: #56407A; --house-rookwood-border: rgba(123,93,175,0.30); /* Dawson — Dusky Rose (Pink / Dragon) */ --house-dawson: #C4588A; --house-dawson-light: rgba(196,88,138,0.10); --house-dawson-pale: rgba(196,88,138,0.18); --house-dawson-dark: #8E3462; --house-dawson-border: rgba(196,88,138,0.30); /* Poytnz — Warm Crimson (Red / Pig) */ --house-poytnz: #C04848; --house-poytnz-light: rgba(192,72,72,0.10); --house-poytnz-pale: rgba(192,72,72,0.18); --house-poytnz-dark: #862E2E; --house-poytnz-border: rgba(192,72,72,0.30); /* Mary Ward — Warm Sand (Cream / School Crest) */ --house-mary-ward: #B8A278; --house-mary-ward-light: rgba(184,162,120,0.10); --house-mary-ward-pale: rgba(184,162,120,0.18); --house-mary-ward-dark: #7D6E4E; --house-mary-ward-border: rgba(184,162,120,0.30); /* ── SEMANTIC COLOURS ─────────────────────────────────── Use these names in components — not raw brand colours. This means if the brand evolves, you only update here. ─────────────────────────────────────────────────────── */ /* Backgrounds */ --bg-page: #CBD3EB; /* periwinkle — main page bg */ --bg-card: #FFFFFF; /* card / panel surfaces */ --bg-card-tint: #F7F8FC; /* slightly tinted card bg */ --bg-sidebar: #C8D4EC; /* light periwinkle-blue sidebar for light mode */ --bg-topbar: var(--color-white); /* Text */ --text-heading: var(--color-navy); --text-body: #2a3550; --text-muted: #6b7a99; --text-faint: #9aa3bb; --text-on-dark: var(--color-white); --text-on-dark-muted: var(--color-periwinkle-dim); --text-gold-on-light: var(--color-gold-muted); /* gold on white bg */ --text-gold-on-dark: var(--color-gold-bright); /* gold on navy bg */ /* Borders */ --border-default: rgba(4,30,66,0.08); --border-card: rgba(4,30,66,0.07); --border-gold: rgba(168,153,110,0.22); --border-gold-strong: rgba(168,153,110,0.45); /* Status colours */ --color-success: #1a6b3a; --color-success-bg: rgba(26,107,58,0.08); --color-warning: #b87820; --color-warning-bg: rgba(184,120,32,0.08); --color-danger: #c83232; --color-danger-bg: rgba(200,50,50,0.08); --color-info: #2a5ab8; --color-info-bg: rgba(42,90,184,0.08); /* Accent colours — category/icon tinting */ --color-accent-blue: #60a5fa; /* light blue — apps/features */ --color-accent-blue-bg:rgba(59,130,246,0.12); --color-accent-purple: #a78bfa; /* light purple — system/admin */ --color-accent-purple-bg:rgba(139,92,246,0.12); --color-accent-green: #4ade80; /* light green — done/complete */ --color-accent-green-bg:rgba(34,197,94,0.12); /* Schedule source colours — calendar/timetable colour coding */ --source-timetable: #6366f1; --source-timetable-bg: rgba(99,102,241,0.08); --source-exchange: var(--color-gold); --source-exchange-bg: rgba(168,153,110,0.06); --source-school: #4a72b8; --source-school-bg: rgba(74,114,184,0.06); --source-sport: #4a9a6a; --source-sport-bg: rgba(74,154,106,0.06); /* Sidebar-specific text roles — tuned for light periwinkle-blue sidebar */ --sb-text-active: var(--color-navy); /* dark navy on light bg */ --sb-text-idle: #4a5a80; /* medium blue-navy for idle items */ --sb-text-label: rgba(4,30,66,0.40); /* section labels */ --sb-active-bg: rgba(4,30,66,0.10); --sb-active-bar: var(--color-gold-muted); /* gold muted — readable on light */ --tile-featured-bg: #1f4fa0; /* lighter navy for featured tiles in light mode */ /* ── TYPOGRAPHY ───────────────────────────────────────── Source: St Mary's Brand Guidelines (2026 update) - UI: Segoe UI — used platform-wide, including headings. - Display-hero: AGFA Rotis Semi Serif — reserved for genuinely decorative moments only (dashboard greeting, sidebar user name). Always styled with small-caps to match the school logo. Rotis was over-used sitewide — bold weights render poorly and lowercase reads as odd. `--font-display` now resolves to Segoe UI so every existing heading silently flips; opt in to Rotis via `--font-display-hero` only where decoration is the point. ─────────────────────────────────────────────────────── */ --font-ui: 'Segoe UI', -apple-system, BlinkMacSystemFont, system-ui, 'Helvetica Neue', Arial, sans-serif; --font-display: var(--font-ui); --font-display-hero: 'Rotis Semi Serif', 'EB Garamond', Georgia, serif; /* Scale */ --text-xs: 0.56rem; /* 8px — labels, tags, eyebrows */ --text-sm: 0.68rem; /* 9.5px — small UI text */ --text-base: 0.8rem; /* 11px — standard UI */ --text-md: 0.88rem; /* 12px — body / sidebar items */ --text-lg: 1rem; /* 14px — sub-headings */ --text-xl: 1.2rem; /* 17px — card headings */ --text-2xl: 1.55rem; /* 22px — page titles */ --text-3xl: 2rem; /* 28px — hero headings */ /* Letter spacing */ --tracking-tight: -0.01em; --tracking-normal: 0; --tracking-wide: 0.04em; --tracking-wider: 0.1em; --tracking-widest: 0.2em; /* uppercase labels */ /* ── SPACING ──────────────────────────────────────────── Consistent spacing scale used everywhere. All padding, margin, gap values should use these. ─────────────────────────────────────────────────────── */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 28px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; /* ── BORDER RADIUS ──────────────────────────────────────*/ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-full: 9999px; /* ── SHADOWS ────────────────────────────────────────────*/ --shadow-xs: 0 1px 3px rgba(4,30,66,0.07); --shadow-sm: 0 2px 8px rgba(4,30,66,0.09), 0 1px 2px rgba(4,30,66,0.04); --shadow-md: 0 8px 24px rgba(4,30,66,0.11), 0 2px 6px rgba(4,30,66,0.05); --shadow-lg: 0 24px 56px rgba(4,30,66,0.14), 0 8px 16px rgba(4,30,66,0.07); /* ── LAYOUT ─────────────────────────────────────────────*/ --sidebar-width: 248px; --topbar-height: 50px; --sysbar-height: 42px; --content-max-width: 1400px; /* ── TRANSITIONS ────────────────────────────────────────*/ --transition-fast: 0.12s ease; --transition-base: 0.2s ease; --transition-slow: 0.35s ease; /* ── Z-INDEX HIERARCHY ───────────────────────────────── Strict tier system. Match the SMILE rule in CLAUDE.md: - base: trivial stacking inside a card or row - dropdown: popovers, search results, autocompletes - modal: overlays + their content - modal-elevated: a modal stacked on top of another modal (rare) - overlay-fullscreen: lightbox / slideshow / privacy shield (sits above modals) - toast: top-of-screen notifications - topmost: reserved for the absolute top — feature lightboxes that must cover everything */ --z-base: 1; --z-dropdown: 100; --z-modal: 1000; --z-modal-elevated: 1100; --z-overlay-fullscreen: 9000; --z-toast: 10000; --z-topmost: 99999; /* ── TOOLTIPS ──────────────────────────────────────────*/ --tooltip-bg: var(--color-navy); --tooltip-text: var(--color-white); --tooltip-shadow: var(--shadow-sm); --tooltip-radius: var(--radius-sm); --tooltip-delay: 300ms; --tooltip-font: var(--text-xs); } /* ── DARK THEME ──────────────────────────────────────────── Applied via data-theme="dark" on . Remaps semantic colours only — brand palette stays intact. Toggle lives in the avatar dropdown (smile-shell.js). ──────────────────────────────────────────────────────── */ [data-theme="dark"] { /* Backgrounds */ --bg-page: #152641; /* deep navy — layered depth */ --bg-card: #031633; /* dark navy — cards */ --bg-card-tint: #0f3060; /* hover/active tint on cards */ --bg-sidebar: #031633; /* matches cards — sidebar recedes */ --bg-topbar: #031633; /* matches cards */ /* Text */ --text-heading: #e2e6f0; --text-body: #b8c0d4; --text-muted: #7b869e; --text-faint: #525c72; --text-on-dark: #e8ecf4; --text-on-dark-muted: rgba(203,211,235,0.5); --text-gold-on-light: var(--color-gold-light); --text-gold-on-dark: var(--color-gold-bright); /* Borders */ --border-default: rgba(255,255,255,0.08); --border-card: rgba(255,255,255,0.06); --border-gold: rgba(168,153,110,0.18); --border-gold-strong: rgba(168,153,110,0.35); /* Status colours — slightly muted for dark bg */ --color-success: #2ea85a; --color-success-bg: rgba(46,168,90,0.12); --color-warning: #d4922a; --color-warning-bg: rgba(212,146,42,0.12); --color-danger: #e04848; --color-danger-bg: rgba(224,72,72,0.12); --color-info: #4a80d8; --color-info-bg: rgba(74,128,216,0.12); /* Schedule source colours — lifted for dark backgrounds */ --source-timetable: #818cf8; --source-timetable-bg: rgba(99,102,241,0.12); --source-exchange: var(--color-gold); --source-exchange-bg: rgba(168,153,110,0.08); --source-school: #6a92d8; --source-school-bg: rgba(74,114,184,0.08); --source-sport: #6aba8a; --source-sport-bg: rgba(74,154,106,0.08); /* Sidebar — dark navy, restore dark-bg text tokens */ --sb-text-active: #f0f2f8; --sb-text-idle: rgba(203,211,235,0.60); /* lifted from 0.45 for better visibility */ --sb-text-label: rgba(200,180,120,0.38); --sb-active-bg: rgba(168,153,110,0.13); --sb-active-bar: var(--color-gold); --tile-featured-bg: #0c2d55; /* lifted navy — stands out from page bg */ /* House colours — slightly lifted for dark backgrounds */ --house-babthorpe: #D4AE38; --house-babthorpe-light: rgba(212,174,56,0.12); --house-babthorpe-pale: rgba(212,174,56,0.20); --house-babthorpe-dark: #D4AE38; --house-babthorpe-border: rgba(212,174,56,0.25); --house-bedingfeld: #48A870; --house-bedingfeld-light: rgba(72,168,112,0.12); --house-bedingfeld-pale: rgba(72,168,112,0.20); --house-bedingfeld-dark: #48A870; --house-bedingfeld-border: rgba(72,168,112,0.25); --house-wigmore: #5588CC; --house-wigmore-light: rgba(85,136,204,0.12); --house-wigmore-pale: rgba(85,136,204,0.20); --house-wigmore-dark: #5588CC; --house-wigmore-border: rgba(85,136,204,0.25); --house-rookwood: #9478C4; --house-rookwood-light: rgba(148,120,196,0.12); --house-rookwood-pale: rgba(148,120,196,0.20); --house-rookwood-dark: #9478C4; --house-rookwood-border: rgba(148,120,196,0.25); --house-dawson: #D46A9A; --house-dawson-light: rgba(212,106,154,0.12); --house-dawson-pale: rgba(212,106,154,0.20); --house-dawson-dark: #D46A9A; --house-dawson-border: rgba(212,106,154,0.25); --house-poytnz: #D45858; --house-poytnz-light: rgba(212,88,88,0.12); --house-poytnz-pale: rgba(212,88,88,0.20); --house-poytnz-dark: #D45858; --house-poytnz-border: rgba(212,88,88,0.25); --house-mary-ward: #CCBA92; --house-mary-ward-light: rgba(204,186,146,0.12); --house-mary-ward-pale: rgba(204,186,146,0.20); --house-mary-ward-dark: #CCBA92; --house-mary-ward-border: rgba(204,186,146,0.25); /* Shadows — subtle in dark mode */ --shadow-xs: 0 1px 3px rgba(0,0,0,0.25); --shadow-sm: 0 2px 8px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.15); --shadow-md: 0 8px 24px rgba(0,0,0,0.35), 0 2px 6px rgba(0,0,0,0.2); --shadow-lg: 0 24px 56px rgba(0,0,0,0.4), 0 8px 16px rgba(0,0,0,0.25); /* Tooltips — light on dark */ --tooltip-bg: #e2e6f0; --tooltip-text: var(--color-navy); color-scheme: dark; } /* ── VIEW TRANSITIONS ──────────────────────────────────── Smooth crossfade between panel switches. Uses the View Transitions API (Chrome 111+, Safari 18+). Falls back to instant swap on unsupported browsers. ──────────────────────────────────────────────────────── */ ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.2s; animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }