/* ============================================================
   TCCA Design Tokens
   Palette: Obsidian + Bone (from TCCA Brand Intro Sheet)
   Type scale: golden ratio (x1.618) fluid
   ============================================================ */

:root {
  /* Color: obsidian family */
  --obsidian: #050604;          /* page ground (brand #020403, lifted a hair off pure) */
  --obsidian-2: #0c0d0b;        /* raised surfaces */
  --obsidian-3: #161714;        /* borders on dark, hover surfaces */

  /* Color: bone family (neutral off-white) */
  --bone: #f1f0ee;              /* primary type on dark, light-section ground */
  --bone-dim: #a8a7a4;          /* secondary type on dark */
  --bone-faint: #7f7e7a;        /* tertiary / meta type on dark (AA ≥ 4.5:1 on obsidian) */

  /* Ink used on bone sections */
  --ink: #0b0c0a;
  --ink-dim: #4a4a45;

  /* Accent: deep red, used sparingly (labels, focus, the view pill) */
  --accent: #9e372d;
  --accent-deep: #7e2b24;

  /* Form validation */
  --error: #e0a9a0;

  /* Hairlines */
  --line: rgba(241, 240, 238, 0.14);
  --line-strong: rgba(241, 240, 238, 0.3);
  --line-ink: rgba(11, 12, 10, 0.16);

  /* Type families */
  --font-display: 'Cinderblock', 'Arial Narrow', sans-serif;        /* condensed shout type */
  --font-serif: 'TT Ramillas', Georgia, serif;                       /* editorial headlines */
  --font-sans: 'Rethink Sans', 'Segoe UI', Arial, sans-serif;        /* body + UI */
  --font-narrow: 'ZT Ravigsfen', 'Arial Narrow', sans-serif;         /* numerals / accents */

  /* Golden-ratio type scale (base 17 x 1.618^n), fluid */
  --text-sm: clamp(0.72rem, 0.68rem + 0.2vw, 0.8rem);       /* meta, labels */
  --text-base: clamp(0.95rem, 0.9rem + 0.25vw, 1.0625rem);  /* body 17px */
  --text-md: clamp(1.35rem, 1.2rem + 0.7vw, 1.72rem);       /* 27.5px lead lines */
  --text-lg: clamp(1.9rem, 1.5rem + 1.9vw, 2.78rem);        /* 44.5px section heads */
  --text-xl: clamp(2.6rem, 1.9rem + 3.4vw, 4.5rem);         /* 72px page heads */
  --text-2xl: clamp(3.4rem, 2.2rem + 6vw, 7.28rem);         /* 116.5px hero / shout */

  /* Golden-ratio spacing rhythm (base 21px x φ) */
  --space-1: 0.5rem;      /* 8 */
  --space-2: 0.8125rem;   /* 13 */
  --space-3: 1.3125rem;   /* 21 */
  --space-4: 2.125rem;    /* 34 */
  --space-5: 3.4375rem;   /* 55 */
  --space-6: 5.5625rem;   /* 89 */
  --space-7: 9rem;        /* 144 */

  /* Layout */
  --page-max: 1400px;
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --nav-h: 72px;

  /* Golden split */
  --phi-major: 61.8%;
  --phi-minor: 38.2%;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-inout: cubic-bezier(0.83, 0, 0.17, 1);
  --dur-fast: 0.3s;
  --dur-med: 0.62s;    /* φ-derived step */
  --dur-slow: 1s;

  /* Nav glass */
  --nav-glass: rgba(5, 6, 4, 0.78);

  /* Z scale */
  --z-nav: 40;
  --z-menu: 50;
  --z-loader: 60;
  --z-grain: 70;
}

/* ============================================================
   Light theme (toggled via the floating contact dial)
   The bone/obsidian roles mirror: page goes paper, the closing
   "Say hello" and footer flip to obsidian.
   ============================================================ */
:root[data-theme="light"] {
  --obsidian: #f2f1ef;
  --obsidian-2: #e8e7e5;
  --obsidian-3: #dbdad7;

  --bone: #0e0f0d;
  --bone-dim: #4a4a47;
  --bone-faint: #676663;

  --ink: #f1f0ee;
  --ink-dim: #a8a7a4;

  --line: rgba(11, 12, 10, 0.16);
  --line-strong: rgba(11, 12, 10, 0.34);
  --line-ink: rgba(241, 240, 238, 0.16);

  --nav-glass: rgba(242, 241, 239, 0.82);
}