/* ============================================================================ Phrasicle design tokens ---------------------------------------------------------------------------- Every colour, radius, shadow and duration in the site resolves to something declared here. Light is the base; dark redefines only the values that change. Theme resolution order: system preference, then an explicit [data-theme] on written by the theme toggle, which always wins. ========================================================================== */ :root { color-scheme: light; /* ---- brand ------------------------------------------------------------ */ --brand-100: #d8fbf7; --brand-200: #a5f2ea; --brand-300: #6ee7dc; --brand-400: #2fd4c7; --brand-500: #12b5ae; --brand-600: #0d9089; --brand-700: #0b6f6a; --brand-900: #063d3a; /* ---- page ------------------------------------------------------------- */ --page-base: #1cc6c0; --page-glow-a: rgb(150 245 232 / 90%); --page-glow-b: rgb(88 226 226 / 70%); --page-glow-c: rgb(11 111 106 / 45%); /* ---- surfaces --------------------------------------------------------- */ --surface: #fdfbf7; --surface-2: #f5f0e8; --surface-3: #eae3d8; --surface-inset: #fffefb; --border: #e3dbcd; --border-strong: #cfc4b1; /* ---- text ------------------------------------------------------------- */ --ink: #17212e; --ink-2: #45525f; --ink-3: #6e7b88; --ink-invert: #fdfbf7; /* ---- actions ---------------------------------------------------------- */ --action: #17212e; --action-hover: #253442; --action-ink: #fdfbf7; --action-ghost-bg: #fdfbf7; --action-ghost-border: #d8cfbf; --action-ghost-hover: #f2ebe0; /* ---- chain rows ------------------------------------------------------- Four hues, one per grid row. Each has a line (border + connector), a wash (solved fill) and an ink for the word itself. */ --row-0-line: #dfa227; --row-0-wash: #fdf2d9; --row-0-ink: #7a5307; --row-1-line: #e2618f; --row-1-wash: #fde7ef; --row-1-ink: #8d2350; --row-2-line: #4497d8; --row-2-wash: #e3f0fc; --row-2-ink: #10476f; --row-3-line: #3fb387; --row-3-wash: #e0f6ed; --row-3-ink: #0e5b3f; /* ---- states ----------------------------------------------------------- */ --hint-ink: #9aa4af; --wrong: #d6455b; --wrong-wash: #fde9ec; --focus-ring: #12b5ae; /* ---- medals ----------------------------------------------------------- */ --gold-a: #ffd764; --gold-b: #e0a11c; --gold-ink: #8a5c00; --silver-a: #e9eef2; --silver-b: #a8b4bf; --silver-ink: #5b6875; --bronze-a: #eaa96c; --bronze-b: #b9702c; --bronze-ink: #7d4715; --star-empty: #cdc3b2; /* ---- depth ------------------------------------------------------------ */ --shadow-sm: 0 1px 2px rgb(23 33 46 / 6%), 0 1px 1px rgb(23 33 46 / 4%); --shadow-md: 0 2px 4px rgb(23 33 46 / 6%), 0 6px 16px rgb(23 33 46 / 8%); --shadow-lg: 0 4px 8px rgb(23 33 46 / 6%), 0 18px 40px rgb(23 33 46 / 12%); --shadow-xl: 0 8px 16px rgb(23 33 46 / 8%), 0 32px 64px rgb(23 33 46 / 18%); --shadow-tile: 0 1px 0 rgb(23 33 46 / 8%); --shadow-key: 0 2px 0 var(--border-strong); /* ---- geometry --------------------------------------------------------- */ --r-xs: 6px; --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-pill: 999px; /* ---- type ------------------------------------------------------------- */ --font-ui: 'Outfit', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-display: 'Gloria Hallelujah', 'Bradley Hand', 'Comic Sans MS', cursive; /* ---- motion ----------------------------------------------------------- */ --t-fast: 120ms; --t-med: 220ms; --t-slow: 420ms; --ease: cubic-bezier(0.2, 0.8, 0.2, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* ---- layout ----------------------------------------------------------- */ --board-max: 860px; --prose-max: 68ch; --header-h: 60px; /* Height reserved at the bottom of the board for the fixed keyboard. */ --kb-h: 190px; } /* -------------------------------------------------------------- dark theme */ @media (prefers-color-scheme: dark) { :root:not([data-theme='light']) { color-scheme: dark; --page-base: #06181d; --page-glow-a: rgb(13 144 137 / 45%); --page-glow-b: rgb(10 84 96 / 55%); --page-glow-c: rgb(3 12 16 / 70%); --surface: #12242a; --surface-2: #1a3138; --surface-3: #234047; --surface-inset: #0e1d22; --border: #26454d; --border-strong: #365d66; --ink: #e9f4f2; --ink-2: #adc4c2; --ink-3: #7f9a99; --ink-invert: #0b1b20; --action: #2fd4c7; --action-hover: #6ee7dc; --action-ink: #05201f; --action-ghost-bg: #1a3138; --action-ghost-border: #365d66; --action-ghost-hover: #234047; --row-0-line: #cf9a2f; --row-0-wash: #3a2e13; --row-0-ink: #ffdb92; --row-1-line: #d1618c; --row-1-wash: #3a1c29; --row-1-ink: #ffc2d8; --row-2-line: #4e93c9; --row-2-wash: #14293a; --row-2-ink: #b3daf8; --row-3-line: #46a67f; --row-3-wash: #123128; --row-3-ink: #a9edcd; --hint-ink: #6b8382; --wrong: #f5808f; --wrong-wash: #3a1a20; --focus-ring: #6ee7dc; --gold-a: #ffdf86; --gold-b: #d59a24; --gold-ink: #ffe9a8; --silver-a: #f0f5f8; --silver-b: #9aa8b3; --silver-ink: #dbe4ea; --bronze-a: #f0b478; --bronze-b: #b1702f; --bronze-ink: #f5cfa4; --star-empty: #3d5a60; --shadow-sm: 0 1px 2px rgb(0 0 0 / 30%); --shadow-md: 0 2px 4px rgb(0 0 0 / 30%), 0 6px 16px rgb(0 0 0 / 32%); --shadow-lg: 0 4px 8px rgb(0 0 0 / 32%), 0 18px 40px rgb(0 0 0 / 42%); --shadow-xl: 0 8px 16px rgb(0 0 0 / 36%), 0 32px 64px rgb(0 0 0 / 52%); --shadow-tile: 0 1px 0 rgb(0 0 0 / 25%); --shadow-key: 0 2px 0 #0b1b20; } } /* The toggle writes data-theme, which must beat the media query in both directions, so the full dark set is repeated for the explicit case. */ :root[data-theme='dark'] { color-scheme: dark; --page-base: #06181d; --page-glow-a: rgb(13 144 137 / 45%); --page-glow-b: rgb(10 84 96 / 55%); --page-glow-c: rgb(3 12 16 / 70%); --surface: #12242a; --surface-2: #1a3138; --surface-3: #234047; --surface-inset: #0e1d22; --border: #26454d; --border-strong: #365d66; --ink: #e9f4f2; --ink-2: #adc4c2; --ink-3: #7f9a99; --ink-invert: #0b1b20; --action: #2fd4c7; --action-hover: #6ee7dc; --action-ink: #05201f; --action-ghost-bg: #1a3138; --action-ghost-border: #365d66; --action-ghost-hover: #234047; --row-0-line: #cf9a2f; --row-0-wash: #3a2e13; --row-0-ink: #ffdb92; --row-1-line: #d1618c; --row-1-wash: #3a1c29; --row-1-ink: #ffc2d8; --row-2-line: #4e93c9; --row-2-wash: #14293a; --row-2-ink: #b3daf8; --row-3-line: #46a67f; --row-3-wash: #123128; --row-3-ink: #a9edcd; --hint-ink: #6b8382; --wrong: #f5808f; --wrong-wash: #3a1a20; --focus-ring: #6ee7dc; --gold-a: #ffdf86; --gold-b: #d59a24; --gold-ink: #ffe9a8; --silver-a: #f0f5f8; --silver-b: #9aa8b3; --silver-ink: #dbe4ea; --bronze-a: #f0b478; --bronze-b: #b1702f; --bronze-ink: #f5cfa4; --star-empty: #3d5a60; --shadow-sm: 0 1px 2px rgb(0 0 0 / 30%); --shadow-md: 0 2px 4px rgb(0 0 0 / 30%), 0 6px 16px rgb(0 0 0 / 32%); --shadow-lg: 0 4px 8px rgb(0 0 0 / 32%), 0 18px 40px rgb(0 0 0 / 42%); --shadow-xl: 0 8px 16px rgb(0 0 0 / 36%), 0 32px 64px rgb(0 0 0 / 52%); --shadow-tile: 0 1px 0 rgb(0 0 0 / 25%); --shadow-key: 0 2px 0 #0b1b20; }