/* ═══════════════════════════════════════════════════════════════════
   CHS Theme Design Tokens — v1.0 runtime copy
   ───────────────────────────────────────────────────────────────────
   Direction: Cream Paper + Editorial Magazine
   Approved:  Cameron — 2026-05-20
   Demo source-of-truth: resources/design-demos/chs-tokens.css
   AI source-of-truth:   docs/design-system/tokens-v1.0.css
   Theme runtime copy:   wp-content/themes/chs-theme/assets/css/tokens.css
   Technical notation:   docs/design-system/OKLCH-TOKEN-SYSTEM.md
   Design language:      docs/design-system/CHS-DESIGN.md

   How this file is structured:
     1. Palette — HEX literals as base layer (universal compatibility,
        readable in DB/email/Gutenberg/print)
     2. Palette — OKLCH overrides inside @supports, identical perception
        but enables oklch(from ...) derivations
     3. Semantic tokens (what blocks/components consume)
     4. Derived state tokens (hover/active/disabled/subtle/ring)
     5. Typography
     6. Spacing, radii, layout
     7. Motion

   Rule: blocks consume semantic tokens. Palette tokens are for this
   file only. New hues require Cameron's sign-off (palette is locked).
   ═══════════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────────────
   1. PALETTE — HEX fallback layer
   ─────────────────────────────────────────────────────────────────── */
:root {
  --chs-teal-deep:    #0B3543;
  --chs-teal:         #155368;
  --chs-teal-2:       #2A6A7E;
  --chs-gold:         #B5A445;
  --chs-gold-bright:  #C9B958;
  --chs-light:        #E5F8E9;
  --chs-cream:        #FFF6EC;
  --chs-cream-2:      #ECDDCD;
  --chs-near-black:   #0A1F26;
  --chs-ink:          #0B3543;
}

/* ───────────────────────────────────────────────────────────────────
   2. PALETTE — OKLCH override (exact conversions of the HEX above)
   These are the values agents must derive states from. Identical
   perceptually to the HEX above; the @supports gate keeps old engines
   on HEX and gives modern engines oklch(from ...) capability.
   ─────────────────────────────────────────────────────────────────── */
@supports (color: oklch(50% 0.1 200)) {
  :root {
    --chs-teal-deep:    oklch(30.79% 0.0509 224.77);
    --chs-teal:         oklch(41.40% 0.0696 225.38);
    --chs-teal-2:       oklch(49.19% 0.0717 221.81);
    --chs-gold:         oklch(71.48% 0.1168  99.20);
    --chs-gold-bright:  oklch(77.98% 0.1194 100.07);
    --chs-light:        oklch(96.10% 0.0282 151.93);
    --chs-cream:        oklch(97.74% 0.0164  70.54);
    --chs-cream-2:      oklch(90.53% 0.0271  69.27);
    --chs-near-black:   oklch(22.56% 0.0300 222.44);
    --chs-ink:          oklch(30.79% 0.0509 224.77);
  }
}

/* ───────────────────────────────────────────────────────────────────
   3. SEMANTIC TOKENS — the surface blocks/components consume
   ─────────────────────────────────────────────────────────────────── */
:root {
  /* Surfaces */
  --chs-bg:            var(--chs-cream);       /* page background */
  --chs-bg-deep:       var(--chs-teal-deep);   /* dark hero/band sections */
  --chs-surface:       #ffffff;                /* elevated cards on cream */
  --chs-surface-2:     var(--chs-cream);       /* nested cards / alt rows */

  /* Section backgrounds — the 6 approved recipe colors
     (source: cameron-pages-v1/cameron-pages.css + section-background-recipes.html) */
  --chs-bg-warm:       var(--chs-cream-2);     /* "Warm paper" */
  --chs-bg-mint:       var(--chs-light);       /* "Mint field" */
  --chs-bg-teal:       var(--chs-teal);        /* "Teal blue" */
  --chs-bg-ink:        var(--chs-near-black);  /* "Near black" */

  /* Text */
  --chs-fg:            var(--chs-ink);         /* primary body */
  --chs-fg-muted:      var(--chs-teal-2);      /* secondary body / meta */
  --chs-fg-on-deep:    var(--chs-cream);       /* text on teal-deep */
  --chs-fg-on-accent:  var(--chs-near-black);  /* text on gold CTA */
  --chs-on-light:      var(--chs-ink);         /* text on light section bgs */

  /* Structure */
  --chs-border:        var(--chs-cream-2);
  --chs-border-strong: var(--chs-teal-2);

  /* Brand actions */
  --chs-accent:        var(--chs-gold);
  --chs-accent-bright: var(--chs-gold-bright);
  --chs-accent-hover:  var(--chs-accent-bright); /* matches approved demo CTA hover */
  --chs-on-accent:     var(--chs-near-black);  /* alias of fg-on-accent */
  --chs-on-deep:       var(--chs-cream);       /* alias of fg-on-deep */
  --chs-primary:       var(--chs-teal);        /* primary structural */

  /* Status — introduce only when needed; keep palette tight */
  --chs-ok:            #2e8f57;
  --chs-warn:          #b68c2a;
  --chs-danger:        #c23a2a;
  --chs-info:          #2f6f8f;
}

@supports (color: oklch(50% 0.1 200)) {
  :root {
    --chs-ok:          oklch(58% 0.13 145);
    --chs-warn:        oklch(74% 0.16  75);
    --chs-danger:      oklch(55% 0.20  25);
    --chs-info:        oklch(58% 0.10 230);
  }
}

/* ───────────────────────────────────────────────────────────────────
   4. DERIVED STATE TOKENS
   Requires modern engines (oklch + relative color syntax).
   In legacy engines, semantic tokens still resolve via the HEX layer;
   only the *state variants* need the @supports gate.
   ─────────────────────────────────────────────────────────────────── */
@supports (color: oklch(from red l c h)) {
  :root {
    /* Gold accent (CTAs) */
    --chs-accent-hover:    var(--chs-accent-bright);
    --chs-accent-active:   oklch(from var(--chs-accent) calc(l - 0.12) c h);
    --chs-accent-disabled: oklch(from var(--chs-accent) calc(l + 0.05) calc(c * 0.25) h);
    --chs-accent-subtle:   oklch(from var(--chs-accent) 96% calc(c * 0.20) h);
    --chs-accent-ring:     oklch(from var(--chs-accent) l c h / 0.40);

    /* Teal primary */
    --chs-primary-hover:    oklch(from var(--chs-primary) calc(l - 0.06) c h);
    --chs-primary-active:   oklch(from var(--chs-primary) calc(l - 0.12) c h);
    --chs-primary-disabled: oklch(from var(--chs-primary) calc(l + 0.10) calc(c * 0.30) h);
    --chs-primary-subtle:   oklch(from var(--chs-primary) 94% calc(c * 0.15) h);
    --chs-primary-ring:     oklch(from var(--chs-primary) l c h / 0.40);

    /* Status */
    --chs-danger-hover:    oklch(from var(--chs-danger) calc(l - 0.06) c h);
    --chs-danger-subtle:   oklch(from var(--chs-danger) 96% calc(c * 0.20) h);
    --chs-ok-subtle:       oklch(from var(--chs-ok)     96% calc(c * 0.20) h);
    --chs-warn-subtle:     oklch(from var(--chs-warn)   96% calc(c * 0.20) h);
    --chs-info-subtle:     oklch(from var(--chs-info)   96% calc(c * 0.20) h);
  }
}

/* Fallbacks for engines without relative color syntax. Approximate
   manual values so basic hover/disabled still resolves to something
   sane instead of resolving to nothing. */
@supports not (color: oklch(from red l c h)) {
  :root {
    --chs-accent-hover:    var(--chs-gold-bright);
    --chs-accent-active:   var(--chs-gold);
    --chs-accent-disabled: var(--chs-cream-2);
    --chs-accent-subtle:   var(--chs-cream);
    --chs-accent-ring:     rgba(181, 164, 69, 0.40);

    --chs-primary-hover:    var(--chs-teal-2);
    --chs-primary-active:   var(--chs-teal-deep);
    --chs-primary-disabled: var(--chs-cream-2);
    --chs-primary-subtle:   var(--chs-cream);
    --chs-primary-ring:     rgba(21, 83, 104, 0.40);
  }
}

/* ───────────────────────────────────────────────────────────────────
   5. TYPOGRAPHY
   ─────────────────────────────────────────────────────────────────── */
:root {
  /* Font stacks — Editorial Magazine */
  --chs-display: "Barlow Condensed", Impact, sans-serif;
  --chs-sans:    "Barlow Condensed", Impact, sans-serif;
  --chs-serif:   "Lora", Georgia, serif;
  --chs-mono:    "IBM Plex Mono", ui-monospace, monospace;

  /* Fluid type scale */
  --chs-h1: clamp(48px, 7vw,   96px);
  --chs-h2: clamp(36px, 5vw,   64px);
  --chs-h3: clamp(26px, 3.5vw, 40px);
  --chs-h4: clamp(20px, 2.4vw, 28px);
  --chs-h5: clamp(16px, 1.8vw, 20px);

  --chs-body-size: 17px;
  --chs-body-lh:   1.6;

  /* Display headline behavior (consumed by h1–h3 in components) */
  --chs-display-weight:   700;
  --chs-display-lh:       0.95;
  --chs-display-tracking: -0.02em;

  /* Micro-typography (Cameron feedback 2026-05-20: bumped for legibility) */
  --chs-eyebrow-size:     13px;
  --chs-eyebrow-weight:   600;
  --chs-eyebrow-tracking: 0.16em;

  --chs-nav-link-size:     13px;
  --chs-nav-link-weight:   600;
  --chs-nav-link-tracking: 0.14em;

  --chs-nav-brand-size:   20px;
  --chs-nav-brand-weight: 800;

  --chs-button-tracking:  0.12em;
}

/* ───────────────────────────────────────────────────────────────────
   6. SPACING, RADII, LAYOUT
   ─────────────────────────────────────────────────────────────────── */
:root {
  /* 8px baseline scale */
  --chs-space-xs:  8px;
  --chs-space-sm:  16px;
  --chs-space-md:  24px;
  --chs-space-lg:  48px;
  --chs-space-xl:  80px;
  --chs-space-2xl: 128px;

  /* Section rhythm */
  --chs-section-py: clamp(80px, 10vw, 160px);

  /* Radii */
  --chs-radius-sm:   2px;
  --chs-radius-md:   4px;
  --chs-radius-pill: 9999px;

  /* Layout */
  --chs-pad: clamp(20px, 4vw, 56px);
  --chs-max: 1400px;

  /* Borders */
  --chs-border-w: 1px;
}

/* ───────────────────────────────────────────────────────────────────
   7. MOTION
   ─────────────────────────────────────────────────────────────────── */
:root {
  --chs-ease:       cubic-bezier(.16, 1, .3, 1);    /* default — gentle expo */
  --chs-ease-quart: cubic-bezier(.76, 0, .24, 1);   /* state changes */
  --chs-ease-out:   cubic-bezier(.22, .61, .36, 1); /* exits */

  --chs-dur-fast:    200ms;
  --chs-dur-medium:  300ms;
  --chs-dur-slow:    400ms;
}

/* ------------------------------------------------------------------
   Compatibility aliases for the existing CHS theme/block contract.
   This lets current blocks pick up the locked v1 look before each
   block is migrated to semantic tokens.
   ------------------------------------------------------------------ */
:root {
  /* Legacy brand names */
  --chs-primary:   var(--chs-teal);
  --chs-secondary: var(--chs-teal-2);
  --chs-white:     var(--chs-surface);
  --chs-dark:      var(--chs-near-black);

  /* Legacy text names */
  --chs-text:       var(--chs-fg);
  --chs-text-dark:  var(--chs-fg);
  --chs-text-light: var(--chs-on-deep);
  --chs-text-muted: var(--chs-fg-muted);

  /* Legacy typography names */
  --chs-font-heading: var(--chs-display);
  --chs-font-body:    var(--chs-serif);

  /* Legacy type scale names */
  --chs-hero-title:    var(--chs-h1);
  --chs-section-title: var(--chs-h2);
  --chs-subtitle:      clamp(20px, 3vw, 36px);
  --chs-body-large:    clamp(18px, 2vw, 22px);

  /* Legacy spacing names */
  --chs-space-3xl: var(--chs-space-xl);
  --chs-space-4xl: var(--chs-space-xl);
  --chs-space-5xl: var(--chs-space-2xl);

  /* Legacy shadow names */
  --chs-shadow-sm: 0 1px 2px rgba(11, 53, 67, 0.06);
  --chs-shadow:    0 2px 8px rgba(11, 53, 67, 0.08);
  --chs-shadow-md: 0 4px 12px rgba(11, 53, 67, 0.10);
  --chs-shadow-lg: 0 18px 40px rgba(11, 53, 67, 0.14);
  --chs-shadow-xl: 0 28px 60px rgba(11, 53, 67, 0.16);

  /* Legacy radius names */
  --chs-radius:      var(--chs-radius-md);
  --chs-radius-lg:   8px;
  --chs-radius-xl:   8px;
  --chs-radius-full: var(--chs-radius-pill);

  /* Legacy transition names */
  --chs-transition-fast: var(--chs-dur-fast) var(--chs-ease);
  --chs-transition:      var(--chs-dur-medium) var(--chs-ease);
  --chs-transition-slow: var(--chs-dur-slow) var(--chs-ease);
}

body {
  background-color: var(--chs-bg);
  color: var(--chs-fg);
}