/* ============================================================
   KURO CLINIC — DESIGN TOKEN SYSTEM v2
   Three-layer: Primitive → Semantic → Component
   Nathan Studio · nathanstudio.co
   ============================================================ */

/* ── LAYER 1: PRIMITIVE ─────────────────────────────────────── */
:root {
  --p-void:       #0F0C09;
  --p-dark:       #1A1410;
  --p-bark:       #2A1E14;
  --p-bark-light: #3D2B1F;
  --p-clay:       #9E7D62;   /* lifted from #8B6E52 — passes WCAG AA */
  --p-clay-muted: #8B6E52;   /* large text only */
  --p-sand:       #C4A882;
  --p-gold:       #A8865A;
  --p-linen:      #F0EAE0;
  --p-ivory:      #F5EFE6;
  --p-ivory-mid:  #EDE5D8;
  --p-ivory-dark: #D9CEBC;

  /* Spacing — 4px base */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 24px;  --sp-6: 32px;  --sp-7: 48px;  --sp-8: 64px;
  --sp-9: 80px;  --sp-10: 96px;

  /* Type scale */
  --ts-xs:   9px;   --ts-sm:  11px;  --ts-base: 13px;
  --ts-md:   16px;  --ts-lg:  22px;  --ts-xl:   32px;
  --ts-2xl:  44px;  --ts-3xl: 58px;

  /* Motion */
  --ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-in:  cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

/* ── LAYER 2: SEMANTIC ──────────────────────────────────────── */
:root {
  /* Surfaces */
  --bg-dark:          var(--p-void);
  --bg-dark-surface:  var(--p-dark);
  --bg-dark-elevated: var(--p-bark);
  --bg-light:         var(--p-ivory);
  --bg-light-surface: var(--p-ivory-mid);
  --bg-light-border:  var(--p-ivory-dark);

  /* Text on dark */
  --text-dark-primary:   var(--p-linen);
  --text-dark-secondary: var(--p-sand);
  --text-dark-muted:     var(--p-clay);      /* corrected — AA compliant */

  /* Text on light */
  --text-light-primary:   var(--p-void);
  --text-light-secondary: var(--p-bark-light);
  --text-light-muted:     var(--p-clay-muted);  /* passes AA on ivory */

  /* Borders */
  --border-dark:    rgba(42, 30, 20, 0.8);
  --border-dark-sm: rgba(42, 30, 20, 0.5);
  --border-light:   var(--p-ivory-dark);

  /* Accent */
  --accent:       var(--p-sand);
  --accent-warm:  var(--p-gold);
  --accent-muted: var(--p-clay);

  /* Fonts */
  --font-display:   'Unbounded', sans-serif;
  --font-editorial: 'Bodoni Moda', serif;
  --font-body:      'Raleway', sans-serif;

  /* Layout */
  --inset: 52px;
  --nav-h: 72px;

  /* Transitions */
  --t-fast: 0.18s ease;
  --t-base: 0.28s ease;
  --t-slow: 0.45s ease;

  /* Letter spacing */
  --ls-wide:  0.22em;
  --ls-wider: 0.32em;
  --ls-tight: -0.015em;
}

/* ── LAYER 3: COMPONENT ─────────────────────────────────────── */
:root {
  --nav-bg:           rgba(15,12,9,0.94);
  --nav-border:       rgba(139,110,82,0.18);
  --nav-link:         var(--p-clay);
  --nav-link-hover:   var(--p-linen);

  --cta-color:        var(--p-linen);
  --cta-border:       var(--p-clay-muted);
  --cta-color-dark:   var(--p-void);
  --cta-border-dark:  var(--p-gold);

  --card-bg:          var(--p-ivory-mid);
  --card-bg-hover:    var(--p-ivory);
  --card-border:      var(--p-ivory-dark);
  --card-name:        var(--p-bark-light);
  --card-body:        var(--p-clay-muted);

  --footer-word:      rgba(42,30,20,0.55);
  --footer-meta:      rgba(158,125,98,0.45);
}