/* ============================================================
   Design tokens — the foundation. Change here, cascade everywhere.
   ============================================================ */

:root {
  /* ---------- Base palette: deep near-black ---------- */
  --bg:             #0A0A0C;     /* page background */
  --bg-raised:      #101014;     /* nav / raised surfaces */
  --surface:        #141418;     /* cards, modals */
  --surface-2:      #1A1A1F;     /* nested cards, inputs */
  --surface-3:      #22222A;     /* hovered inputs, pressed states */

  --border:         #26262D;     /* default border */
  --border-strong:  #34343C;     /* emphasised border */
  --border-subtle:  #1D1D22;     /* barely-there border */

  --text:           #EDEDEF;     /* primary text */
  --text-strong:    #FFFFFF;     /* headings / emphasised */
  --text-muted:     #9B9BA3;     /* secondary text */
  --text-subtle:    #65656C;     /* tertiary / placeholder */
  --text-faint:     #44444A;     /* barely-there labels */

  /* ---------- Gold accent — rich, 14k ---------- */
  --gold:           #D4A72C;     /* primary */
  --gold-hover:     #E6B836;     /* hover */
  --gold-soft:      #F5D57A;     /* highlight / text on dark gold */
  --gold-deep:      #B88B1E;     /* pressed / darker */

  --gold-tint-04:   rgba(212, 167, 44, 0.04);
  --gold-tint-08:   rgba(212, 167, 44, 0.08);
  --gold-tint-15:   rgba(212, 167, 44, 0.15);
  --gold-tint-25:   rgba(212, 167, 44, 0.25);
  --gold-tint-40:   rgba(212, 167, 44, 0.40);

  --gold-glow:      0 0 24px rgba(212, 167, 44, 0.18);
  --gold-glow-lg:   0 0 48px rgba(212, 167, 44, 0.22);

  /* TODO · Paper treatment experiment (reverted) — see components.css for notes */
  /* --paper-warmth: transparent; */

  /* ---------- Semantic ---------- */
  --success:        #3DD68C;
  --success-tint:   rgba(61, 214, 140, 0.10);
  --warn:           #E8A84C;
  --warn-tint:      rgba(232, 168, 76, 0.10);
  --error:          #E85A5A;
  --error-tint:     rgba(232, 90, 90, 0.10);
  --info:           #6DAED8;
  --info-tint:      rgba(109, 174, 216, 0.10);

  /* ---------- Typography ---------- */
  --font-sans:      "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-serif:     "Instrument Serif", Georgia, "Times New Roman", serif;
  --font-mono:      "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --fs-12:          12px;
  --fs-13:          13px;
  --fs-14:          14px;
  --fs-15:          15px;
  --fs-16:          16px;
  --fs-18:          18px;
  --fs-20:          20px;
  --fs-24:          24px;
  --fs-32:          32px;
  --fs-40:          40px;
  --fs-56:          56px;

  --lh-tight:       1.15;
  --lh-snug:        1.3;
  --lh-normal:      1.5;
  --lh-loose:       1.65;

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

  /* ---------- Spacing (4-based) ---------- */
  --s-1:            4px;
  --s-2:            8px;
  --s-3:            12px;
  --s-4:            16px;
  --s-5:            20px;
  --s-6:            24px;
  --s-7:            32px;
  --s-8:            40px;
  --s-9:            48px;
  --s-10:           64px;
  --s-11:           80px;
  --s-12:           96px;

  /* ---------- Radii ---------- */
  --r-xs:           4px;
  --r-sm:           6px;
  --r-md:           8px;
  --r-lg:           12px;
  --r-xl:           16px;
  --r-2xl:          22px;
  --r-full:         999px;

  /* ---------- Shadows (on dark) ---------- */
  --shadow-sm:      0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md:      0 4px 16px rgba(0, 0, 0, 0.35);
  --shadow-lg:      0 12px 36px rgba(0, 0, 0, 0.50);
  --shadow-xl:      0 24px 64px rgba(0, 0, 0, 0.60);

  /* ---------- Motion ---------- */
  --ease:           cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:       cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out:    cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast:         120ms;
  --t-base:         180ms;
  --t-slow:         280ms;

  /* ---------- Layout ---------- */
  --nav-h:          60px;
  --container-sm:   560px;
  --container-md:   820px;
  --container-lg:   1120px;
  --container-xl:   1360px;
}