/* ==========================================================================
Cluelogix — Design Tokens
--------------------------------------------------------------------------
Single source of truth for the website's colors, typography, spacing,
radius, shadows, and motion. Derived from the game's `game/style.css`
:root block so the site matches the product 1:1.
Usage: import this file, then reference tokens as var(--token-name).
e.g. color: var(--text); background: var(--bg);
Aesthetic: "warm editorial" — cream paper, serif display + geometric sans,
four muted earthy accents (amber, terracotta, teal, plum).
========================================================================== */
/* --- Web font (optional) ---------------------------------------------------
Outfit is an open-source Google Font. Either:
(a) self-host the variable woff2 (as the game does), or
(b) load from Google Fonts in your HTML :
Self-host example (adjust the path to wherever you place the file):
*/
/*
@font-face {
font-family: 'Outfit';
src: url('fonts/Outfit-VariableFont_wght.woff2') format('woff2');
font-weight: 100 900;
font-display: swap;
}
*/
:root {
/* ---- Backgrounds ---- */
--bg: #F8F3EB; /* base cream / "paper" */
--bg-warm: #F2EBDF; /* warm panels, headers, insets */
--bg-white: #FFFFFF; /* cards, elevated surfaces */
--bg-dark: #1C1B18; /* status bar, overlays (ink) */
--bg-dark-raised: #2A2924;
/* ---- Text hierarchy ---- */
--text: #1C1B18; /* primary */
--text-secondary: #6B665C; /* sub-copy, clues */
--text-muted: #766F65; /* de-emphasized (WCAG AA 4.5:1) */
--text-faint: #C4BFB4; /* dividers, disabled */
--text-on-dark: rgba(248, 243, 235, 0.85);
--text-on-dark-muted: rgba(248, 243, 235, 0.55);
--text-on-dark-faint: rgba(248, 243, 235, 0.3);
/* ---- Category accents (the core four) ---- */
--amber: #8B6D2E;
--terracotta: #B04A3A; /* hero accent */
--teal: #2A6B62; /* brand wordmark + success */
--plum: #5B4B8A;
/* ---- Accent tints (subtle fills) ---- */
--amber-tint: rgba(139, 109, 46, 0.08);
--terracotta-tint: rgba(176, 74, 58, 0.06);
--teal-tint: rgba(42, 107, 98, 0.07);
--plum-tint: rgba(91, 75, 138, 0.06);
/* ---- Difficulty colors (reuse accents) ---- */
--easy: #2A6B62;
--moderate: #8B6D2E;
--challenging: #B04A3A;
/* ---- Borders ---- */
--border-thin: #DDD7CC;
--border-thick: #B0A99E;
/* ---- Cell / interactive states ---- */
--cell-x: #C0564A; /* ✕ eliminated */
--cell-check: #2A6B62; /* ✓ confirmed */
--cell-check-bg: rgba(42, 107, 98, 0.08);
--cell-hover: rgba(176, 74, 58, 0.05);
--cell-highlight: rgba(176, 74, 58, 0.03);
/* ---- Button hover accents (dark context) ---- */
--teal-pressed: #236A5A;
--btn-warm-peach: #F0C0B0;
--btn-warm-gold: #E8D8A0;
/* ---- Spacing scale (4px base) ---- */
--space-xs: 4px;
--space-sm: 8px;
--space-md: 16px;
--space-lg: 24px;
--space-xl: 32px;
--space-2xl: 48px;
--space-3xl: 64px;
/* ---- Typography ---- */
--font-body: 'Outfit', 'Segoe UI', system-ui, -apple-system, sans-serif;
--font-display: 'Georgia', 'Cambria', 'Times New Roman', serif;
--font-mono: 'Consolas', 'Courier New', monospace;
--text-xs: 0.75rem; /* ~12px */
--text-sm: 0.85rem; /* ~13.6px */
--text-base: 0.95rem; /* ~15.2px */
--text-lg: 1.1rem; /* ~17.6px */
--text-xl: 1.35rem; /* ~21.6px */
--text-2xl: 2rem; /* 32px */
--text-3xl: 2.5rem; /* 40px (scales up on large screens) */
/* ---- Border radius ---- */
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-xl: 16px;
--radius-pill: 100px;
/* ---- Shadows (warm, low-opacity, ink-based) ---- */
--shadow-sm: 0 1px 3px rgba(28, 27, 24, 0.06);
--shadow-md: 0 2px 16px rgba(28, 27, 24, 0.08), 0 0 0 1px rgba(28, 27, 24, 0.03);
--shadow-lg: 0 4px 32px rgba(28, 27, 24, 0.10), 0 0 0 1px rgba(28, 27, 24, 0.04);
--shadow-hover: 0 6px 24px rgba(28, 27, 24, 0.12), 0 0 0 1px rgba(28, 27, 24, 0.05);
/* ---- Transitions ---- */
--transition-fast: 0.1s ease;
--transition-base: 0.18s ease;
--transition-slow: 0.3s ease;
/* ---- Signature spring easing (pops / reveals) ---- */
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
/* ---- Safe-area insets (mobile notch / home indicator) ---- */
--safe-top: env(safe-area-inset-top, 0px);
--safe-bottom: env(safe-area-inset-bottom, 0px);
--safe-left: env(safe-area-inset-left, 0px);
--safe-right: env(safe-area-inset-right, 0px);
}
/* --- Reusable gradient motifs (optional helpers) ---------------------------
These reproduce the game's signature decorative devices. Apply to a
pseudo-element or thin element as a background.
*/
:root {
/* Divider: fades in, shoulders on faint, peaks on an accent in the middle */
--divider-terracotta: linear-gradient(to right, transparent, var(--text-faint) 20%, var(--terracotta) 50%, var(--text-faint) 80%, transparent);
--divider-amber: linear-gradient(to right, transparent, var(--text-faint) 20%, var(--amber) 50%, var(--text-faint) 80%, transparent);
--divider-teal: linear-gradient(to right, transparent, var(--text-faint) 20%, var(--teal) 50%, var(--text-faint) 80%, transparent);
/* Multi-accent bar (win card / status bar top edge) */
--accent-bar-3: linear-gradient(to right, var(--terracotta), var(--amber), var(--teal));
--accent-bar-4: linear-gradient(to right, var(--terracotta), var(--amber), var(--teal), var(--plum));
}