/* ============================================================
   IAM GOLF — tokens.css   ·   system "GALLERY" (v3)
   Light, airy, gallery-forward — paper ground, big rounded
   panels, one dark footer. Strict brand monochrome (no hue).
   Confident weights, not brutalist. Self-contained.
   ============================================================ */
:root {
  color-scheme: light dark;
  /* mono scale — brand black/white only */
  --paper: #f7f6f3;       /* page ground — warm off-white */
  --paper-2: #efeee9;     /* raised card fill */
  --white: #ffffff;
  --ink: #101010;         /* primary text on paper */
  --ink-2: rgba(16, 16, 16, 0.62);   /* secondary */
  /* Tertiary was 38% ink for the look of it and measured 2.46:1 on paper —
     every label, coordinate and terms line was under AA. 62% keeps the
     quiet register and clears it. */
  --ink-3: rgba(16, 16, 16, 0.62);
  --hair: rgba(16, 16, 16, 0.14);    /* hairlines on paper */
  --carbon: #0c0c0c;      /* feature panels + footer */
  --coal: #161616;
  /* photography stays as shot on paper; on a dark ground it has to stop
     glaring, so the filter is a token rather than a literal */
  --img-filter: none;
  /* Ink for text sitting ON the one band. The band inverts between themes,
     so these have to invert with it — they cannot be alphas of a fixed
     colour, which is what left the footer invisible in dark. */
  --band-ink:   #f7f6f3;
  --band-ink-2: rgba(247, 246, 243, 0.82);
  --band-ink-3: rgba(247, 246, 243, 0.60);
  --band-hair:  rgba(247, 246, 243, 0.20);
  /* the sticky nav's translucent veil over whatever scrolls under it */
  --nav-veil:   rgba(247, 246, 243, 0.86);

  /* contextual (bands flip these) */
  --bg: var(--paper);
  --fg: var(--ink);
  --fg-2: var(--ink-2);
  --fg-3: var(--ink-3);
  --line: var(--hair);

  /* type — one athletic grotesk, mono for labels/ledger */
  --f-display: "Archivo", system-ui, sans-serif;
  --f-body: "Archivo", system-ui, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, monospace;

  --t-hero: clamp(3.25rem, 11vw, 9rem);   /* wordmark svg driver */
  --t-h2: clamp(2rem, 5.6vw, 4rem);        /* centered section titles */
  --t-why: clamp(1.5rem, 3.3vw, 2.5rem);
  --t-half: clamp(6.5rem, 19vw, 14rem);    /* the ½ monument */
  --t-lead: clamp(1.0625rem, 1.7vw, 1.3125rem);
  --t-body: 1.0625rem;
  --t-label: 0.8125rem;
  --t-micro: 0.75rem;

  /* 8-point spacing — airier than MATTE */
  --s1: 8px;  --s2: 16px; --s3: 24px; --s4: 32px;
  --s5: 40px; --s6: 48px; --s8: 64px; --s10: 80px;
  --s12: 96px; --s16: 128px; --s20: 160px;

  --maxw: 1200px;
  --gutter: clamp(20px, 5vw, 64px);
  --r-chip: 999px;
  --r-card: 20px;         /* the rounded-panel signature */
  --r-media: 22px;

  /* motion */
  --dur-1: 0.35s;
  --dur-2: 0.7s;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

/* dark band — footer + feature panels invert */
.band-dark {
  --bg: var(--carbon);
  --fg: var(--paper);
  --fg-2: rgba(247, 246, 243, 0.66);
  --fg-3: rgba(247, 246, 243, 0.4);
  --line: rgba(247, 246, 243, 0.16);
}


/* ============================================================
   THE SAME GALLERY, LIGHTS DOWN
   ------------------------------------------------------------
   The system's one structural move is a light room with ONE dark
   band — the feature panels and the footer. Inverted, that has to
   become a dark room with one LIGHT band, or the band stops being
   a band and the page flattens into a single tone.

   So --carbon does not stay carbon: it becomes the bone the paper
   was, and the text on it goes dark. Everything else follows from
   the ground and ink swapping.
   ============================================================ */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #121211;
    --paper-2: #1c1c1a;
    --white: #1c1c1a;
    --ink: #f2f1ec;
    --ink-2: rgba(242, 241, 236, 0.70);
    --ink-3: rgba(242, 241, 236, 0.56);
    --hair: rgba(242, 241, 236, 0.18);
    /* the one band, inverted */
    --carbon: #ece9e2;
    --coal: #dedbd3;
    --img-filter: brightness(0.84) contrast(1.04);
    --band-ink:   #121211;
    --band-ink-2: rgba(18, 18, 17, 0.82);
    --band-ink-3: rgba(18, 18, 17, 0.62);
    --band-hair:  rgba(18, 18, 17, 0.22);
    --nav-veil:   rgba(18, 18, 17, 0.88);
  }
}

:root[data-theme="dark"] {
  --paper: #121211;
  --paper-2: #1c1c1a;
  --white: #1c1c1a;
  --ink: #f2f1ec;
  --ink-2: rgba(242, 241, 236, 0.70);
  --ink-3: rgba(242, 241, 236, 0.56);
  --hair: rgba(242, 241, 236, 0.18);
  --carbon: #ece9e2;
  --coal: #dedbd3;
  --img-filter: brightness(0.84) contrast(1.04);
  --band-ink:   #121211;
  --band-ink-2: rgba(18, 18, 17, 0.82);
  --band-ink-3: rgba(18, 18, 17, 0.62);
  --band-hair:  rgba(18, 18, 17, 0.22);
}

/* The band's own secondary inks are the one thing that can't follow from
   --paper/--carbon alone: those two swap, so the band flips from dark to
   light, and its muted text has to flip with it. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .band-dark {
    --fg-2: rgba(18, 18, 17, 0.82);
    --fg-3: rgba(18, 18, 17, 0.62);
    --line: rgba(18, 18, 17, 0.22);
  }
}
:root[data-theme="dark"] .band-dark {
  --fg-2: rgba(18, 18, 17, 0.82);
  --fg-3: rgba(18, 18, 17, 0.62);
  --line: rgba(18, 18, 17, 0.22);
}