/* tcl-theme/assets/css/tokens.css
 * TCL locked brand tokens + web design-system layer.
 *
 * Canonical values from The Community League Design System (shared with the TCL Play
 * app) and the web extension applied in the approved landing mockup (TCL-552 / TCL-554).
 * Do NOT invent or drift the locked palette. The old Elementor kit palette
 * (#181818 / #BC9565 / Lato+Heebo) is retired and must not be reused.
 *
 * Two layers:
 *   1. BASE      — raw brand values (locked palette + derived ramps, fonts)
 *   2. SEMANTIC  — role-based vars you build with (--surface, --ink, --action…)
 * Build UI with the semantic tokens, not the raw ramp.
 */

:root {
  /* ===========================================================
     1. BASE — BRAND PALETTE (locked hex values, do not alter)
     =========================================================== */
  --gold:        #b58b38;  /* primary brand accent */
  --deep-forest: #0a302b;  /* darkest — ink & dark surfaces */
  --forest:      #294c3e;  /* mid green — secondary surface */
  --cream:       #d7ccb3;  /* warm light neutral / paper edge */

  /* Gold ramp (derived from --gold in oklch) */
  --gold-50:  #f7f0e0;
  --gold-100: #ecdcb9;
  --gold-200: #ddc488;
  --gold-300: #cba85a;
  --gold-400: #b58b38;   /* = --gold */
  --gold-500: #9d7629;
  --gold-600: #7e5d1d;
  --gold-700: #5e4514;

  /* Forest ramp (derived) */
  --forest-900: #07241f;
  --forest-800: #0a302b;  /* = --deep-forest */
  --forest-700: #143e35;
  --forest-600: #294c3e;  /* = --forest */
  --forest-500: #3c6453;
  --forest-400: #5a8170;
  --forest-300: #84a89a;
  --forest-200: #b3ccc1;
  --forest-100: #dceae4;

  /* Warm neutrals (cream-anchored, for light UI) */
  --paper:    #fbf9f4;   /* site background (light) */
  --sand-50:  #f4efe4;
  --sand-100: #ece4d3;
  --sand-200: #d7ccb3;   /* = --cream */
  --sand-300: #bcae8e;

  /* True warm grays (text & lines on light surfaces) */
  --ink-900: #1a1d1b;
  --ink-700: #3a423e;
  --ink-500: #687069;
  --ink-400: #8b938d;
  --ink-300: #b4bbb6;
  --ink-200: #d8ddd9;
  --ink-100: #eef1ee;
  --white:   #ffffff;
  --black:   #13100e;    /* background black */

  /* Status / sport accents (derived, harmonious) */
  --live:      #d8432b;  /* LIVE / recording — warm signal red */
  --live-bg:   #fbe6e0;
  --win:       #2f8f5b;
  --win-bg:    #dff1e6;
  --warning:   #d98a1f;
  --warning-bg:#fbeccd;
  --danger:    #c0392b;
  --danger-bg: #f8e2df;
  --info:      #2f6f8f;
  --info-bg:   #e0eef4;

  /* ===========================================================
     2. SEMANTIC — SURFACES, INK, ACTIONS (build with THESE)
     =========================================================== */
  --bg:              var(--paper);
  --surface:         var(--white);
  --surface-sunk:    var(--sand-50);
  --surface-brand:   var(--deep-forest);
  --surface-brand-2: var(--forest);

  --ink:           var(--ink-900);
  --ink-soft:      var(--ink-700);
  --ink-muted:     var(--ink-500);
  --on-brand:      var(--cream);
  --on-brand-soft: var(--forest-300);
  --on-gold:       var(--deep-forest);

  --line:        var(--ink-200);
  --line-strong: var(--ink-300);
  --line-brand:  var(--forest-500);

  --action:       var(--gold);
  --action-press: var(--gold-600);
  --action-ink:   var(--deep-forest);
  --accent:       var(--forest);

  /* ===========================================================
     RADII / SPACING / ELEVATION
     =========================================================== */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;

  --shadow-sm: 0 1px 2px rgba(10, 48, 43, 0.06), 0 1px 3px rgba(10, 48, 43, 0.08);
  --shadow-md: 0 4px 10px rgba(10, 48, 43, 0.08), 0 2px 4px rgba(10, 48, 43, 0.06);
  --shadow-lg: 0 12px 28px rgba(10, 48, 43, 0.14), 0 4px 10px rgba(10, 48, 43, 0.08);
  --shadow-brand: 0 10px 30px rgba(10, 48, 43, 0.35);

  /* ===========================================================
     TYPE — SYSTEM FONT (functional UI) + IDENTITY FONTS
     WEB RULE: identity fonts (Norwester primary / Anton secondary /
     Lost in South accent) are allowed on hero, headers, section titles.
     Body copy, forms, buttons, nav stay on --font-ui. @font-face
     declarations that load the files live in main.css.
     =========================================================== */
  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
             Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
               "Liberation Mono", monospace;
  --font-anton: "Anton", "Arial Narrow", "Helvetica Neue Condensed", Impact, sans-serif;
  --font-norwester: "Norwester", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --font-script: "Lost in South", Georgia, "Times New Roman", serif;

  /* Type scale (mirrors the app themed-text + web extensions) */
  --fs-display: 40px;  --lh-display: 42px;
  --fs-title:   32px;  --lh-title:   34px;
  --fs-h2:      24px;  --lh-h2:      28px;
  --fs-subtitle:20px;  --lh-subtitle:24px;
  --fs-body:    16px;  --lh-body:    24px;
  --fs-callout: 15px;  --lh-callout: 20px;
  --fs-label:   14px;  --lh-label:   18px;
  --fs-caption: 13px;  --lh-caption: 16px;
  --fs-micro:   11px;  --lh-micro:   14px;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;
  --fw-heavy:   800;

  --track-eyebrow: 0.08em;

  /* Desktop display tier (fluid clamp: mobile min → desktop max) */
  --fs-hero:       clamp(48px, 9vw, 112px);
  --lh-hero:       0.94;
  --fs-display-xl: clamp(40px, 6.5vw, 80px);
  --lh-display-xl: 0.96;
  --fs-display-lg: clamp(32px, 4.5vw, 56px);
  --lh-display-lg: 1.0;
  --fs-lede:       clamp(17px, 1.4vw, 21px);
  --lh-lede:       1.5;

  /* Layout — containers & rhythm */
  --container-max:    1280px;
  --container-narrow:  960px;
  --container-wide:   1600px;
  --gutter:             24px;
  --gutter-lg:          48px;
  --section-y:          72px;
  --section-y-lg:      120px;
  --nav-h:              72px;

  /* Breakpoints — reference values (CSS can't read vars in media queries;
     main.css hard-codes these same numbers). */
  --bp-sm:  480px;
  --bp-md:  768px;
  --bp-lg: 1024px;
  --bp-xl: 1440px;

  /* ===========================================================
     LEGACY ALIASES — kept so the minimal fallback template
     (index.php) still renders. New work uses the tokens above.
     =========================================================== */
  --tcl-gold: var(--gold);
  --tcl-deep-forest: var(--deep-forest);
  --tcl-forest: var(--forest);
  --tcl-cream: var(--cream);
  --tcl-black: var(--black);
  --tcl-white: var(--white);
  --tcl-bg: var(--deep-forest);
  --tcl-surface: var(--forest);
  --tcl-action: var(--gold);
  --tcl-on-brand: var(--cream);
  --tcl-text: var(--white);
  --tcl-font-display: var(--font-norwester);
  --tcl-font-body: var(--font-ui);
}