/* ─────────────────────────────────────────────────────────────────────────
   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
      specs/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;

    /* ── 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%);
    /* 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));

    --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 not here: Gathering's buttons are the platform's
       six treatments, unchanged — see theme.css. */
    --tg-ls-title:   -0.03em;
    --tg-ls-eyebrow: 0.08em;

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

    /* ── 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;
  }
}