/* ========================================================================== Kartuli — design tokens Warm paper + wine + apricot. Adult, calm, not childish. Order matters: 1. :root -> the complete LIGHT palette (every colour lives here) 2. prefers-color-scheme: dark, guarded :root:not([data-theme="light"]) 3. :root[data-theme="dark"] -> explicit choice always wins Never give a colour its only definition inside a media or [data-theme] block. ========================================================================== */ :root { color-scheme: light; /* --- Surfaces & ink (contract) ------------------------------------- */ --bg: #FAF6F0; --surface: #FFFFFF; --surface-2: #F4EDE4; --surface-3: #EDE3D6; /* one step deeper than surface-2: wells, thead */ --line: #E7DCCC; --line-strong: #D8C9B4; --ink: #1A1614; --ink-soft: #57504A; --ink-faint: #8B8079; --ink-invert: #FFF9F2; /* text sitting on wine / apricot / olive */ /* --- Brand & semantic colours (contract) ---------------------------- */ --wine: #8C2F39; /* primary action */ --wine-deep: #6E222B; /* pressed / gradient end */ --apricot: #E0713A; /* accent, highlight */ --olive: #4A7C50; /* correct */ --berry: #B33A3A; /* wrong */ --gold: #D9A441; /* score, streak */ --indigo: #4C5B9A; /* sixth chip hue, links in prose */ /* Tints — chip backgrounds, soft banners, game-state washes. Hard-coded (not color-mix) so they are stable everywhere. */ --wine-tint: #F7EAEA; --apricot-tint: #FCEBE0; --olive-tint: #E5F0E6; --berry-tint: #FBE8E8; --gold-tint: #FAF0DA; --indigo-tint: #E9EBF6; /* Readable foreground for each tint (used by .chip, game states) */ --wine-ink: #6E222B; --apricot-ink: #9A4415; --olive-ink: #2F5A35; --berry-ink: #8E2626; --gold-ink: #7A5613; --indigo-ink: #33407A; /* --- Typography ----------------------------------------------------- */ --font-ui: 'Inter var', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-ka: 'Noto Sans Georgian', 'BPG Arial', system-ui, sans-serif; --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace; /* Type scale — mobile value, growing with the viewport where it helps. */ --fs-xs: 0.75rem; /* 12 — meta, table captions */ --fs-sm: 0.8125rem; /* 13 — help text, chips */ --fs-md: 0.9375rem; /* 15 — body default on phones */ --fs-lg: 1.0625rem; /* 17 — lead paragraph, card title */ --fs-xl: 1.25rem; /* 20 — section heading */ --fs-2xl: clamp(1.5rem, 1.2rem + 1.4vw, 1.875rem); /* page title */ --fs-3xl: clamp(1.875rem, 1.4rem + 2.4vw, 2.625rem); /* hero */ --fs-4xl: clamp(2.25rem, 1.5rem + 3.6vw, 3.5rem); /* game prompt */ --fs-5xl: clamp(2.75rem, 1.6rem + 5.6vw, 4.5rem); /* result score */ --lh-tight: 1.15; --lh-snug: 1.3; --lh-normal: 1.55; --lh-loose: 1.75; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* Tracking is LATIN-ONLY. Never apply it to Georgian (see .ka in base.css). */ --track-tight: -0.015em; --track-wide: 0.06em; /* --- Spacing (4px base) --------------------------------------------- */ --sp-0: 0; --sp-1: 0.25rem; /* 4 */ --sp-2: 0.5rem; /* 8 */ --sp-3: 0.75rem; /* 12 */ --sp-4: 1rem; /* 16 */ --sp-5: 1.25rem; /* 20 */ --sp-6: 1.5rem; /* 24 */ --sp-8: 2rem; /* 32 */ --sp-10: 2.5rem; /* 40 */ --sp-12: 3rem; /* 48 */ --sp-16: 4rem; /* 64 */ --sp-20: 5rem; /* 80 */ /* --- Radii ----------------------------------------------------------- */ --radius-xs: 6px; --radius-s: 10px; --radius-m: 16px; --radius-l: 24px; --radius-xl: 32px; --radius-pill: 999px; /* --- Shadows (warm, never neutral grey) ------------------------------ */ --shadow-1: 0 1px 2px rgba(60,40,20,.06), 0 2px 8px rgba(60,40,20,.05); --shadow-2: 0 4px 16px rgba(60,40,20,.10); --shadow-3: 0 12px 32px rgba(60,40,20,.14), 0 2px 6px rgba(60,40,20,.06); --shadow-inset: inset 0 1px 0 rgba(255,255,255,.55); --shadow-none: 0 0 #0000; /* Focus ring — one definition, used by every focusable thing. */ --focus-ring-color: #8C2F39; --focus-ring: 0 0 0 3px var(--bg), 0 0 0 5px var(--focus-ring-color); /* --- Motion ---------------------------------------------------------- */ --dur-1: 90ms; /* state flip: hover, press */ --dur-2: 160ms; /* enter/leave of a small element */ --dur-3: 260ms; /* card, sheet, toast */ --dur-4: 420ms; /* celebration, flip */ --dur-5: 700ms; /* progress sweeps */ --ease: cubic-bezier(.2, .7, .3, 1); /* default, gentle out */ --ease-in: cubic-bezier(.5, 0, .9, .4); --ease-out: cubic-bezier(.16, 1, .3, 1); /* confident settle */ --ease-spring:cubic-bezier(.2, 1.5, .4, 1); /* pop, playful */ /* --- Z-index scale ---------------------------------------------------- */ --z-base: 0; --z-raised: 10; /* hovered card, sticky table head */ --z-sticky: 100; /* page sub-nav */ --z-topbar: 200; --z-dropdown: 300; /* avatar + language menus */ --z-overlay: 400; /* modal scrim */ --z-modal: 500; --z-toast: 600; --z-tooltip: 700; --z-max: 999; /* --- Layout ----------------------------------------------------------- */ --container: 68rem; /* 1088px — reading-width app pages */ --container-wide: 82rem; --container-prose: 40rem; --topbar-h: 56px; --tap: 44px; /* minimum interactive size (contract rule 3) */ --gutter: var(--sp-4); /* Safe-area helpers for thumb-reachable actions on notched phones. */ --safe-b: env(safe-area-inset-bottom, 0px); --safe-t: env(safe-area-inset-top, 0px); } @media (min-width: 48rem) { :root { --gutter: var(--sp-6); --topbar-h: 64px; } } /* ========================================================================== DARK — same token names, re-pointed. Accents are lifted because the contract's light wine/berry/indigo are unreadable on a dark warm ground. ========================================================================== */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --bg: #14120F; --surface: #1E1A15; --surface-2: #2A241C; --surface-3: #342D23; --line: #3A3128; --line-strong: #4E4336; --ink: #F4EDE3; --ink-soft: #B9AEA0; --ink-faint: #8B8079; --ink-invert: #FFF9F2; --wine: #B8454F; --wine-deep: #8C2F39; --apricot: #EE8A53; --olive: #6EA976; --berry: #DD6464; --gold: #E4BA65; --indigo: #8B99D6; --wine-tint: #3A2024; --apricot-tint: #3B2419; --olive-tint: #1E3022; --berry-tint: #3A1F1F; --gold-tint: #382C16; --indigo-tint: #22263C; --wine-ink: #F0B9BE; --apricot-ink: #F7C19C; --olive-ink: #A8D0AC; --berry-ink: #F3AFAF; --gold-ink: #EED79A; --indigo-ink: #BCC4EC; --shadow-1: 0 1px 2px rgba(0,0,0,.40), 0 2px 8px rgba(0,0,0,.30); --shadow-2: 0 4px 16px rgba(0,0,0,.45); --shadow-3: 0 12px 32px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.35); --shadow-inset: inset 0 1px 0 rgba(255,255,255,.06); --focus-ring-color: #EE8A53; } } :root[data-theme="dark"] { color-scheme: dark; --bg: #14120F; --surface: #1E1A15; --surface-2: #2A241C; --surface-3: #342D23; --line: #3A3128; --line-strong: #4E4336; --ink: #F4EDE3; --ink-soft: #B9AEA0; --ink-faint: #8B8079; --ink-invert: #FFF9F2; --wine: #B8454F; --wine-deep: #8C2F39; --apricot: #EE8A53; --olive: #6EA976; --berry: #DD6464; --gold: #E4BA65; --indigo: #8B99D6; --wine-tint: #3A2024; --apricot-tint: #3B2419; --olive-tint: #1E3022; --berry-tint: #3A1F1F; --gold-tint: #382C16; --indigo-tint: #22263C; --wine-ink: #F0B9BE; --apricot-ink: #F7C19C; --olive-ink: #A8D0AC; --berry-ink: #F3AFAF; --gold-ink: #EED79A; --indigo-ink: #BCC4EC; --shadow-1: 0 1px 2px rgba(0,0,0,.40), 0 2px 8px rgba(0,0,0,.30); --shadow-2: 0 4px 16px rgba(0,0,0,.45); --shadow-3: 0 12px 32px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.35); --shadow-inset: inset 0 1px 0 rgba(255,255,255,.06); --focus-ring-color: #EE8A53; }