/* ==========================================================================
   ARCADÉ STUDIO — design tokens
   Change the palette, the type scale and the rhythm here. Nothing else in the
   stylesheet hard-codes a colour or a size.
   ========================================================================== */

:root {
  /* --- Palette: warm ivory ground, deep ink, one bronze accent ------------ */
  --paper:        #F7F4EF;   /* page ground */
  --paper-2:      #FBFAF7;   /* raised panels, cards */
  --paper-3:      #F1ECE3;   /* recessed bands */
  --stone:        #E7E1D6;   /* warm stone — rules, fills */
  --taupe:        #B3A896;   /* muted taupe — decorative only, never body text */
  --ink:          #16140F;   /* deep black — headings */
  --ink-2:        #2E2A23;   /* charcoal — body copy */
  --muted:        #6E685C;   /* secondary copy — 4.9:1 on --paper */
  --bronze:       #8A6B45;   /* accent, large text and decoration only */
  --bronze-ink:   #7A5C38;   /* accent at body size — 5.7:1 on --paper */

  --line:         rgb(22 20 15 / 0.14);
  --line-soft:    rgb(22 20 15 / 0.08);
  --line-strong:  rgb(22 20 15 / 0.30);

  /* --- Dark chapters ----------------------------------------------------- */
  --d-ground:     #14120E;
  --d-ground-2:   #1D1A15;
  --d-ink:        #F2EDE3;
  --d-muted:      #A79E8E;   /* 7.0:1 on --d-ground */
  --d-bronze:     #C9A06A;   /* 7.7:1 on --d-ground */
  --d-line:       rgb(242 237 227 / 0.16);
  --d-line-soft:  rgb(242 237 227 / 0.09);

  /* Semantic aliases. A `.chapter--dark` block re-points these, so every
     component inside it inverts without knowing anything about the theme. */
  --ground:       var(--paper);
  --ground-2:     var(--paper-2);
  --text:         var(--ink-2);
  --text-strong:  var(--ink);
  --text-muted:   var(--muted);
  --accent:       var(--bronze);
  --accent-text:  var(--bronze-ink);
  --rule:         var(--line);
  --rule-soft:    var(--line-soft);
  --rule-strong:  var(--line-strong);
  --surface-active: var(--paper-3);   /* selected chips, checked options */

  /* --- Type -------------------------------------------------------------- */
  --font-display: 'Instrument Serif', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --font-ui: 'Manrope', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --fs-display: clamp(3rem, 10.5vw, 9.5rem);
  --fs-h1:      clamp(2.4rem, 6.6vw, 6rem);
  --fs-h2:      clamp(1.9rem, 4.4vw, 3.75rem);
  --fs-h3:      clamp(1.3rem, 2.1vw, 1.9rem);
  --fs-h4:      clamp(1.05rem, 1.35vw, 1.25rem);
  --fs-lead:    clamp(1.0625rem, 1.5vw, 1.375rem);
  --fs-body:    clamp(0.9688rem, 1.02vw, 1.0625rem);
  --fs-small:   0.8125rem;
  --fs-meta:    0.6875rem;

  --lh-display: 0.94;
  --lh-head:    1.04;
  --lh-body:    1.62;

  --track-meta: 0.16em;
  --track-tight: -0.02em;

  /* --- Rhythm ------------------------------------------------------------ */
  --maxw:    1560px;
  --maxw-text: 68ch;
  --pad-x:   clamp(1.25rem, 5vw, 5rem);
  --gap:     clamp(1rem, 2.2vw, 2rem);
  --section: clamp(4.5rem, 9vw, 9.5rem);
  --section-sm: clamp(3rem, 5.5vw, 5.5rem);

  /* The arcade: a springing arch, used to mask selected portrait plates.
     It is the studio's one recurring formal device. */
  --arch: 50% 50% 0 0 / 34% 34% 0 0;

  /* --- Motion ------------------------------------------------------------ */
  --ease:      cubic-bezier(0.22, 0.61, 0.36, 1);   /* power2.out equivalent */
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);       /* expo.out equivalent */
  --t-fast:   240ms;
  --t-mid:    460ms;
  --t-slow:   720ms;
  --t-hero:   1000ms;

  --header-h: 76px;
  --z-header: 60;
  --z-menu:   80;
  --z-lightbox: 90;

  color-scheme: light;
}

/* A dark ground re-points the semantic tokens for its whole subtree, so every
   component inside inverts without knowing anything about the theme.
   The hero, the menu and the next-project panel are dark grounds too — listing
   them here is what stops a button inheriting an ink foreground onto near-black. */
.chapter--dark,
.hero,
.menu,
.nextproj {
  --ground:      var(--d-ground);
  --ground-2:    var(--d-ground-2);
  --text:        var(--d-muted);
  --text-strong: var(--d-ink);
  --text-muted:  var(--d-muted);
  --accent:      var(--d-bronze);
  --accent-text: var(--d-bronze);
  --rule:        var(--d-line);
  --rule-soft:   var(--d-line-soft);
  --rule-strong: rgb(242 237 227 / 0.34);
  --surface-active: #272219;
  background: var(--d-ground);
  color: var(--d-muted);
}