/* Design tokens — Apple-inspired 100→1000 semantic scales, shared across kid + admin apps. The scale semantics are: 100 default background 500 hover border 200 hover background 600 active border 300 active background 700 solid fill, high contrast 400 default border 800 solid fill, hover 900 secondary text & icons 1000 primary text & icons Apps reference these tokens via tailwind.config.theme.extend (CDN config in each index.html). Component CSS reads them directly. */ :root { /* ── Typography stacks ─────────────────────────────────────────── */ --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; /* Type tokens — paired font-size / line-height. Used directly via `font: var(--label-14) var(--font-sans)`. */ /* Display — hero / landing only. Tight letter-spacing applied via class. */ --display-56: 700 56px/62px; --display-44: 700 44px/50px; --display-36: 700 36px/42px; /* Headings */ --heading-72: 700 72px/72px; --heading-64: 700 64px/64px; --heading-48: 600 48px/56px; --heading-40: 600 40px/48px; --heading-32: 650 32px/38px; --heading-28: 650 28px/34px; --heading-24: 650 24px/30px; --heading-20: 650 20px/26px; --heading-17: 600 17px/24px; --heading-16: 600 16px/24px; --heading-14: 600 14px/20px; /* Reading prose — Apple News-grade body sizes. */ --prose-21: 400 21px/34px; --prose-19: 400 19px/31px; --prose-17: 400 17px/27px; --label-20: 400 20px/32px; --label-17: 400 17px/24px; --label-16: 400 16px/20px; --label-14: 400 14px/20px; --label-13: 400 13px/16px; --label-12: 400 12px/16px; --copy-24: 400 24px/36px; --copy-18: 400 18px/28px; --copy-16: 400 16px/24px; --copy-14: 400 14px/20px; --copy-13: 400 13px/18px; --button-16: 600 16px/20px; --button-14: 600 14px/20px; --button-12: 600 12px/16px; /* ── Backgrounds (opaque page / card surfaces) ─────────────────── */ --background-100: #ffffff; --background-200: #f5f5f7; --background-300: #eeeef2; /* ── Solid grays (opaque) — for text and opaque fills ──────────── */ --gray-100: #f5f5f7; --gray-200: #ededf0; --gray-300: #e4e4e8; --gray-400: #dadade; --gray-500: #b9bbc2; --gray-600: #8f929a; --gray-700: #6e7179; --gray-800: #555861; --gray-900: #3c3f46; --gray-1000: #15171c; /* ── Gray alpha (translucent) — for borders, dividers, overlays ─ */ --gray-alpha-100: rgba(20, 24, 32, 0.045); --gray-alpha-200: rgba(20, 24, 32, 0.065); --gray-alpha-300: rgba(20, 24, 32, 0.085); --gray-alpha-400: rgba(20, 24, 32, 0.11); --gray-alpha-500: rgba(20, 24, 32, 0.18); --gray-alpha-600: rgba(20, 24, 32, 0.26); --gray-alpha-700: rgba(0, 0, 0, 0.439); --gray-alpha-800: rgba(0, 0, 0, 0.51); --gray-alpha-900: rgba(0, 0, 0, 0.7); --gray-alpha-1000: rgba(0, 0, 0, 0.91); /* ── Blue — admin accent + universal link / focus ──────────────── */ --blue-100: #eef6ff; --blue-200: #e3f0ff; --blue-300: #d5e8ff; --blue-400: #b9d8ff; --blue-500: #89bdff; --blue-600: #4098ff; --blue-700: #0071e3; --blue-800: #0066cc; --blue-900: #0057b8; --blue-1000: #09345f; /* ── Red — errors / destructive ────────────────────────────────── */ --red-100: #fff0f1; --red-200: #ffe8ea; --red-300: #ffe3e4; --red-400: #ffd7d6; --red-500: #ffb1b3; --red-600: #ff676d; --red-700: #ff3b30; --red-800: #e22922; --red-900: #c91d17; --red-1000: #47000c; /* ── Amber — warnings ──────────────────────────────────────────── */ --amber-100: #fff8e5; --amber-200: #fff0c7; --amber-300: #ffe6a3; --amber-400: #ffd66b; --amber-500: #ffc533; --amber-600: #ffb300; --amber-700: #b86d00; --amber-800: #9d5d00; --amber-900: #7a4300; --amber-1000: #561900; /* ── Green — success ───────────────────────────────────────────── */ --green-100: #edfbee; --green-200: #e5fce7; --green-300: #d3fad1; --green-400: #b9f5bc; --green-500: #82eb8d; --green-600: #4ce15e; --green-700: #34c759; --green-800: #248f3d; --green-900: #1f7a35; --green-1000: #003a00; /* ── Warm — kid app accent, same 100→1000 semantics ────────────── */ --warm-100: #fff7e6; --warm-200: #ffefcc; --warm-300: #ffe0a3; --warm-400: #ffcb66; --warm-500: #ffb321; --warm-600: #f59d00; --warm-700: #b76b00; --warm-800: #955600; --warm-900: #744200; --warm-1000: #2b1a04; /* ── Spacing — 4px rhythm ──────────────────────────────────────── */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; /* ── Radius — four-step family. Keep one family per view. ──────── */ --radius-xs: 6px; --radius-sm: 8px; /* default control / card */ --radius-md: 8px; /* Tailwind rounded-md maps here */ --radius-lg: 14px; /* menus / sheets */ --radius-full: 9999px; /* pills / avatars */ /* ── Elevation — restrained; tonal surfaces do most of the work ── */ --shadow-none: none; --shadow-soft: 0 1px 2px rgba(15, 23, 42, 0.04); --shadow-raised: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px -20px rgba(15, 23, 42, 0.18); --shadow-popover: 0 1px 2px rgba(15, 23, 42, 0.06), 0 12px 32px -20px rgba(15, 23, 42, 0.26); --shadow-modal: 0 1px 3px rgba(15, 23, 42, 0.08), 0 24px 60px -28px rgba(15, 23, 42, 0.36); --shadow-floating: 0 2px 4px rgba(15, 23, 42, 0.06), 0 14px 32px -8px rgba(15, 23, 42, 0.18), 0 28px 64px -16px rgba(15, 23, 42, 0.24); /* ── Focus / state rings — used by buttons, inputs, cards ──────── */ --ring-focus: 0 0 0 4px rgba(0, 113, 227, 0.18); --ring-error: 0 0 0 4px rgba(255, 59, 48, 0.16); --ring-warning: 0 0 0 4px rgba(255, 179, 0, 0.18); --ring-success: 0 0 0 4px rgba( 52, 199, 89, 0.18); /* ── Motion — 150 / 200 / 300ms, custom-bezier with slight overshoot */ --ease-out: cubic-bezier(0.175, 0.885, 0.32, 1.1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --duration-state: 150ms; --duration-popover: 200ms; --duration-modal: 300ms; } @media (prefers-reduced-motion: reduce) { :root { --duration-state: 1ms; --duration-popover: 1ms; --duration-modal: 1ms; } }