/* ─────────────────────────────────────────────────────────────────────────
   THE GATHERING BRAND — app-owned tokens.

   Source: specs/the-gathering-style.zip (The Gathering Design System, exported
   from Figma; its reference page is a 1440px marketing homepage).

   This file is deliberately SHORT, and that is the interesting part.

   The platform's own primitive tier is already The Gathering's palette — the
   brand ramps in crm/css/tokens/primitives.css were promoted out of the public
   site, so --olive-600 IS the kit's #989B4B, --green-900 IS its dark-green
   #192F2B, --cream IS its canvas #F6F7EE, --orange-500 IS the hue the kit files
   under "core accent orange", and the --elev-* shadows are already tinted
   rgb(25 47 43) rather than black. Even --font-serif is Newsreader and
   --font-mono is Red Hat Mono.

   Read that orange line carefully: it says the two token FILES agree on a
   value, not that orange is this app's accent. It is not. Olive is the brand
   hue; orange is the one loud element a page is allowed, and Gathering uses it
   exactly once (.tg-tickets in theme.css). Nothing sets it app-wide.

   So Gathering does not need to restate the palette. Restating it would fork
   it: two sources of truth for one brand, drifting apart on the first tweak.
   What lives here is only what the platform tier genuinely lacks —

     · the four supporting hues (clay, earth red, beige, soft turquoise) that
       the marketing system uses and the CRM never had;
     · the hexagon's geometry, which is a brand constant, not a layout choice;
     · the kit's editorial type scale, kept under --tg-* rather than mapped
       onto --text-*. The platform scale is 14px-rooted and dense; this one
       peaks at an 80px serif title. They are different instruments, and a
       Gathering screen that wants brand metrics asks for them by name.

   Deliberately NOT here, for the same reasons as Coherence's brand.css:

   1. The kit's own token names (--accent, --font-display, --space-4,
      --radius-lg, --surface-card …) collide with platform tokens of the same
      name and different values. Brand values arrive under a --tg-* prefix and
      are mapped onto platform tokens only at the points the theme allowlist
      permits (theme.css).
   2. --font-ui, the type scale and the spacing scale are untouched. The kit
      wants Red Hat Text for body; the platform runs Red Hat Display. That is
      a real difference, but a body-face swap changes row height and
      truncation in every shared table and chip at once, and
      docs/dev/web/design-system.md §4.2 records Coherence as the ONE app permitted
      to make it. Gathering's identity comes from its display face, its
      hexagons and its ink — not from re-litigating that.

   Brand rules encoded here (style.md §Colour, §Type, §Layout):
     · Olive #989B4B is the brand hue. Orange is not a second brand hue — it
       is the "at most one per page" ticket accent (style.md's checklist).
     · Two grounds, only two: warm canvas and deep forest green.
     · Radii 4 / 8 / 12 / 16, pills and circles. Shadows green-tinted, never
       black. Hairlines rgba(25,47,43,.12).
     · Hexagon height = 1.1255 × width. Fixed, everywhere.
   ───────────────────────────────────────────────────────────────────────── */

@layer tokens {
  :root {
    /* ── Supporting hues ─────────────────────────────────────────────
       Verbatim from the kit's colors.css. The platform tier has no
       equivalent, so they are introduced here as Gathering primitives and
       referenced only from Gathering's own theme and components.

       --tg-turquoise is the kit's link/"connect" hue. It is the same value as
       the platform's --cat-steel-600, which Outreach uses as an accent; it is
       restated under its brand name rather than borrowed, because a
       categorical holon colour and a brand link colour are different things
       that happen to agree today. */
    --tg-turquoise:      #347a9d;
    --tg-turquoise-soft: #a8daca;
    --tg-clay:           #d4a36b;
    --tg-earth-red:      #853b1d;
    --tg-beige:          #eae1ca;

    /* ── The primaries this file borrows ─────────────────────────────
       Restating the palette is exactly what the header refuses to do, so
       these are not copies: each names the platform token and carries the
       kit's value only as a *fallback*. Wherever the platform tier is
       loaded — every product page — the platform token wins and there is
       one source of truth. An IRIS card is the one place it is not loaded:
       it is a standalone document Playwright renders with this file inlined
       and nothing else, so the fallback is what keeps the card correct
       without retyping the palette into iris/cards/the-gathering (#332). */
    --tg-green-900: var(--green-900, #192F2B);
    --tg-canvas:    var(--cream, #F6F7EE);
    --tg-olive-600: var(--olive-600, #989B4B);
    /* The kit's card olive, a shade greener than the platform ramp's
       --olive-400 (#b8bb78). The card pack is its only consumer, so it is
       declared at the kit's value rather than moving the platform step. */
    --tg-olive-400: #b9bb72;

    /* ── Card-pack tints ─────────────────────────────────────────────
       Retyped inside iris/cards/the-gathering until #332; declared here so
       the cover images and the product read one file. Derived rather than
       transcribed: each is the ink stepped towards the canvas, so they stay
       correct if either ground moves. The card's old literals were
       #2c443f / #2c4a42 / #4a5f5a / #b7c4bf / #d6ded9. */
    --tg-ink-soft:  color-mix(in oklab, var(--tg-green-900) 90%, var(--tg-canvas));
    --tg-ink-muted: color-mix(in oklab, var(--tg-green-900) 88%, var(--tg-canvas));
    --tg-ink-faint: color-mix(in oklab, var(--tg-green-900) 76%, var(--tg-canvas));
    --tg-sage-300:  color-mix(in oklab, var(--tg-green-900) 26%, var(--tg-canvas));
    --tg-sage-200:  color-mix(in oklab, var(--tg-green-900) 13%, var(--tg-canvas));

    /* ── Hexagon ─────────────────────────────────────────────────────
       The brand's primary shape. The ratio is a brand constant — every hex in
       the system is height = 1.1255 × width, so it is a token and not a
       number typed into each rule.

       --tg-hex-clip is the plain polygon, safe anywhere. The exact Figma
       silhouette with softened corners is an SVG clipPath, which Chrome
       cannot reference across files — it needs the <defs> block inlined into
       the document (gathering/partials/_hex_defs.html). */
    --tg-hex-ratio: 1.1255;
    --tg-hex-clip: polygon(50% 0%, 100% 27.6%, 100% 72.1%, 50% 100%, 0% 71.9%, 0% 27.6%);
    /* The same Figma silhouette as the SVG clipPath — rounded corners — as a
       CSS `shape()`, which needs no <defs> inlined in the document. Converted
       point for point from gathering/partials/_hex_defs.html (percentages of
       the box, as its objectBoundingBox units are fractions of it).

       Never use it bare. A browser without `shape()` (iOS before 18.4,
       Firefox before 148) finds `clip-path: var(--tg-hex-clip-soft)` invalid at
       computed-value time and drops the clip altogether — square photos, not
       sharp hexagons. Swap it in for `--tg-hex-clip` inside
       `@supports (clip-path: shape(...))`, so the fallback is the polygon. */
    --tg-hex-clip-soft: shape(
      from 49.37% 0.02%,
      curve to 53.13% 0.59% with 50.64% -0.07% / 51.95% 0.14%,
      line to 96.43% 22.64%,
      curve to 100% 27.95% with 98.53% 23.82% / 99.91% 25.74%,
      vline to 72.06%,
      curve to 94.34% 78.31% with 99.69% 75.54% / 97.38% 76.68%,
      curve to 53.41% 99.15% with 80.89% 85.51% / 66.87% 91.94%,
      curve to 45.73% 98.7% with 50.48% 100.34% / 48.46% 99.92%,
      curve to 3.45% 77.14% with 31.45% 92.25% / 17.69% 83.78%,
      curve to 0% 71.89% with 1.27% 75.77% / 0.19% 74.27%,
      vline to 27.61%,
      curve to 3.45% 22.7% with 0.25% 25.46% / 1.49% 23.94%,
      curve to 17.59% 15.44% with 7.42% 20.2% / 13.22% 17.69%,
      curve to 46.87% 0.59% with 27.32% 10.45% / 37.15% 5.6%,
      curve to 49.37% 0.02% with 47.63% 0.3% / 48.54% 0.08%,
      close
    );
    /* Honeycomb rows overlap vertically by this fraction of a cell's height. */
    --tg-hex-overlap: 0.189;

    /* ── Editorial type scale ────────────────────────────────────────
       The homepage's scale, trimmed to the steps something consumes. Adding
       a step back is fine when a rule needs it; carrying nine unused ones is
       how a token file stops being read. Used only by Gathering's own display
       treatments; nothing shared consumes it. These are the desktop maxima;
       the fluid steps built from them are just below. */
    --tg-t-title:    80px;
    --tg-t-title-sm: 56px;
    --tg-t-intro:    28px;
    --tg-t-body:     18px;

    /* The design system's own named steps, added for the public brand page
       (view:brand) which renders every one of them live. Two of them disagree
       with the steps above and the disagreement is deliberate, not resolved
       here: the system calls default body 16px where --tg-t-body is 18px, and
       tracks the 80px title at -20/1000 where --tg-ls-title is -0.03em. The
       page shows the system's numbers; the components still use the tokens
       above until someone decides to move them. */
    --tg-t-heading:     32px;
    --tg-t-subheading:  24px;
    --tg-t-body-lg:     20px;
    --tg-t-body-default: 16px;
    --tg-t-body-sm:     12px;
    --tg-ls-display:    -0.02em;

    /* The fluid steps live here rather than in theme.css because a fluid size
       IS a token: one clamp() per role, named, so a rule asks for "the title
       size" instead of restating three numbers. It also keeps the literals in
       the primitive tier, which is what a primitive tier is for. */
    --tg-fs-title:      clamp(1.75rem, 4.2vw, var(--tg-t-title-sm));
    --tg-fs-title-hero: clamp(2.5rem, 5.6vw, var(--tg-t-title));
    --tg-fs-intro:      clamp(1rem, 2.2vw, var(--tg-t-intro));

    /* The big figure: a year beside an archive row, a count in a stat block,
       the "Infos" heading. Between --tg-t-heading and --tg-t-title-sm, which
       is where the front page's composition puts it (METIS-pub#390). */
    --tg-t-numeral:  44px;
    --tg-fs-numeral: clamp(2rem, 3.2vw, var(--tg-t-numeral));

    --tg-lh-title: 1;
    --tg-lh-intro: 1.32;
    --tg-lh-body:  1.4;

    /* Tracking. The title is set tight, the eyebrow open. The kit's button
       tracking (+5%, caps) is used only by .tg-button and .tg-link on the
       public site; inside the CRM, Gathering's buttons are the platform's six
       treatments, unchanged — see theme.css. */
    --tg-ls-title:   -0.03em;
    --tg-ls-eyebrow: 0.08em;
    --tg-ls-button:  0.05em;

    --tg-w-light:    300;
    --tg-w-regular:  400;
    --tg-w-medium:   500;
    --tg-w-semibold: 600;

    /* ── Rules and grounds ───────────────────────────────────────────
       The hairline is the kit's, expressed as a mix off the ink so it stays
       correct if the ground moves. The olive tick that prefixes eyebrows,
       caps-list items and lockups is the same line everywhere. */
    --tg-hairline:      color-mix(in oklab, var(--green-900) 12%, transparent);
    --tg-hairline-dark: color-mix(in oklab, var(--white) 16%, transparent);
    --tg-rule:          var(--olive-400);

    /* Deep-green protection gradient for text over photography. Copy stays
       inside the left ~40%, which is where this is still opaque. */
    --tg-photo-gradient: linear-gradient(90deg,
      var(--green-900) 0%,
      color-mix(in oklab, var(--green-900) 82%, transparent) 26%,
      color-mix(in oklab, var(--green-900) 45%, transparent) 48%,
      transparent 72%);

    /* ── Ink ─────────────────────────────────────────────────────────
       The hand-painted flourishes are photographs of ink on paper. They are
       multiplied into the ground so the black reads as a stain rather than a
       grey rectangle, at an opacity low enough to sit under content. Two
       steps, because a corner motif and a full-bleed band want different
       weights — not a scale to add to. */
    --tg-ink-opacity:        0.07;
    --tg-ink-opacity-subtle: 0.045;
  }
}