/* =========================================================================
   Classical Arts — Design Tokens
   "Concert programme meets recording studio": warm paper + piano lacquer.
   See .impeccable.md for the full design brief.
   ========================================================================= */

:root {
  /* ---- Color (OKLCH, neutrals tinted warm toward brass hue ~80) ---- */
  --paper:        oklch(0.971 0.008 85);   /* warm ivory background        */
  --paper-2:      oklch(0.945 0.011 85);   /* raised surface / alt section */
  --paper-3:      oklch(0.915 0.013 84);   /* hairline-bordered fields     */
  --ink:          oklch(0.205 0.010 60);   /* primary warm near-black      */
  --ink-2:        oklch(0.420 0.012 62);   /* secondary text               */
  --ink-3:        oklch(0.560 0.012 64);   /* muted / captions             */

  --lacquer:      oklch(0.185 0.012 50);   /* piano-black dark sections    */
  --lacquer-2:    oklch(0.235 0.013 50);   /* raised surface on dark       */
  --on-lacquer:   oklch(0.945 0.010 85);   /* text on dark                 */
  --on-lacquer-2: oklch(0.760 0.012 70);   /* secondary text on dark       */

  --brass:        oklch(0.760 0.090 80);   /* antique gold (on dark)       */
  --brass-deep:   oklch(0.560 0.090 68);   /* AA gold for text on paper    */
  --oxblood:      oklch(0.420 0.105 25);   /* rare secondary accent        */

  --line:         oklch(0.205 0.010 60 / 0.16); /* hairline on paper       */
  --line-strong:  oklch(0.205 0.010 60 / 0.30);
  --line-on-dark: oklch(0.945 0.010 85 / 0.18);

  --focus:        oklch(0.560 0.090 68);
  --selection:    oklch(0.760 0.090 80 / 0.30);

  /* Semantic roles (light is the default theme) */
  --bg:           var(--paper);
  --surface:      var(--paper-2);
  --fg:           var(--ink);
  --fg-muted:     var(--ink-2);
  --accent:       var(--brass-deep);
  --border:       var(--line);

  /* ---- Type ---- */
  --font-display: 'Bodoni Moda', 'Hanken Grotesk', Georgia, 'Times New Roman', serif;
  --font-body:    'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;

  /* Fluid modular scale — ratio ≈ 1.28, min 360px → max 1280px viewport */
  --step--1: clamp(0.83rem, 0.80rem + 0.14vw, 0.92rem);
  --step-0:  clamp(1.00rem, 0.96rem + 0.20vw, 1.13rem);
  --step-1:  clamp(1.25rem, 1.16rem + 0.42vw, 1.50rem);
  --step-2:  clamp(1.56rem, 1.40rem + 0.78vw, 2.11rem);
  --step-3:  clamp(1.95rem, 1.68rem + 1.34vw, 3.00rem);
  --step-4:  clamp(2.44rem, 2.00rem + 2.18vw, 4.24rem);
  --step-5:  clamp(3.05rem, 2.34rem + 3.55vw, 6.00rem);

  --leading-tight: 1.06;
  --leading-snug:  1.22;
  --leading-body:  1.6;
  --tracking-caps: 0.16em;
  --tracking-tight:-0.01em;
  --measure: 68ch;

  /* ---- Spacing (4pt scale, semantic) ---- */
  --space-2xs: 0.25rem;  /* 4  */
  --space-xs:  0.5rem;   /* 8  */
  --space-sm:  0.75rem;  /* 12 */
  --space-md:  1rem;     /* 16 */
  --space-lg:  1.5rem;   /* 24 */
  --space-xl:  2rem;     /* 32 */
  --space-2xl: 3rem;     /* 48 */
  --space-3xl: 4rem;     /* 64 */
  --space-4xl: 6rem;     /* 96 */
  --space-5xl: clamp(5rem, 3rem + 9vw, 9rem); /* section rhythm */

  /* ---- Layout ---- */
  --container: 75rem;     /* 1200px */
  --container-narrow: 46rem;
  --gutter: clamp(1.25rem, 0.6rem + 3vw, 3rem);

  /* ---- Radius (restrained) ---- */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;

  /* ---- Elevation (soft, warm-tinted) ---- */
  --shadow-sm: 0 1px 2px oklch(0.205 0.01 60 / 0.06);
  --shadow-md: 0 8px 24px -10px oklch(0.205 0.01 60 / 0.20);
  --shadow-lg: 0 24px 60px -24px oklch(0.185 0.012 50 / 0.40);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 160ms;
  --dur: 280ms;
  --dur-slow: 560ms;
}

::selection { background: var(--selection); }