/* ==========================================================================
   GEM brand tokens — the source of truth for color, type, and spacing.

   Values come straight from GEM_BrandGuidelines.pdf (Sept 2026). This file is
   meant to be imported by any GEM project (gem-landing, gem-portal, gem-web,
   gem-game). Everything is namespaced with --gem-* so it won't collide with a
   host project's own variables.

   Layers:
     1. Palette      — raw brand colors + official tint ramps (brand names)
     2. Type         — font stacks + the brand type scale
     3. Space / form — spacing, radius, shadow, motion
     4. Semantic     — role tokens (surface/ink/accent) built from the palette.
                       Prefer these in components so themes can be swapped.
   ========================================================================== */

:root {
  /* ---- 1. Palette ------------------------------------------------------- */
  /* Primaries (PMS / CMYK / RGB in the brand guide; hex is authoritative here) */
  --gem-ozark:   #11312B; /* Ozark Pasture — PMS 627 C */
  --gem-river:   #008476; /* Elk River     — PMS 327 C */
  --gem-gold:    #FFA400; /* Branded Gold  — PMS 137 C */
  --gem-leather: #A95522; /* Saddle Leather— PMS 1605 C */

  /* Official tint ramps (brand guide, base → lightest). */
  --gem-ozark-1:   #415A55;
  --gem-ozark-2:   #708380;
  --gem-ozark-3:   #A0ADAA;
  --gem-ozark-4:   #CFD6D5;

  --gem-river-1:   #339D91;
  --gem-river-2:   #66B5AD;
  --gem-river-3:   #99CEC8;
  --gem-river-4:   #CCE6E4;

  --gem-gold-1:    #FFB633;
  --gem-gold-2:    #FFC866;
  --gem-gold-3:    #FFDB99;
  --gem-gold-4:    #FFEDCC;

  --gem-leather-1: #BA774E;
  --gem-leather-2: #CB997A;
  --gem-leather-3: #DDBBA7;
  --gem-leather-4: #EEDDD3;

  --gem-white:     #FFFFFF;

  /* ---- 2. Type ---------------------------------------------------------- */
  /* Brand guide: Manifold CF (primary) + Montserrat (secondary).
     Load order per project <head>:
       - Manifold CF via Adobe Fonts kit (family slug is "manifold-cf", lowercase
         — that's what the @font-face registers, NOT "Manifold CF").
       - Montserrat via Google Fonts.
     Verified against kit nwk0oka (use.typekit.net/nwk0oka.css): "manifold-cf"
     ships weights 400 and 700 only — NO Heavy. The guide's headline is Manifold
     CF Heavy; until the Heavy weight is added to the Adobe kit, headlines render
     at 700 (see --gem-weight-display below). Montserrat is not in that kit. */
  --gem-font-display: "manifold-cf", "Montserrat", -apple-system,
                      BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --gem-font-body:    "Montserrat", -apple-system, BlinkMacSystemFont,
                      "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Heaviest weight currently available for manifold-cf in kit nwk0oka. Bump to
     800 once Manifold CF Heavy is enabled in the Adobe kit (setting it to 800
     now would trigger faux-bold synthesis in the browser). */
  --gem-weight-display: 700;

  /* Type scale. Brand guide specs: headline 45pt ALL CAPS Manifold CF Heavy,
     subhead 28pt Montserrat Bold, body 13pt Montserrat Regular, 0 tracking.
     Rendered here as a fluid web scale anchored on those relationships. */
  --gem-text-body:    1.0625rem;  /* ~17px screen body (13pt print equiv.)   */
  --gem-text-sm:      0.9375rem;
  --gem-text-eyebrow: 0.78rem;
  --gem-text-subhead: clamp(1.4rem, 1.2vw + 1.05rem, 1.9rem);  /* Montserrat Bold */
  --gem-text-h2:      clamp(1.7rem, 1.5vw + 1.2rem, 2.5rem);
  --gem-text-h1:      clamp(2.1rem, 2.9vw + 0.95rem, 3.9rem);  /* Manifold CF Heavy, caps */

  --gem-leading-tight: 1.1;
  --gem-leading-body:  1.6;
  --gem-tracking:      0;          /* brand guide: 0 tracking everywhere      */
  --gem-tracking-caps: 0.04em;     /* small-caps eyebrows read better w/ air  */

  /* ---- 3. Space / form -------------------------------------------------- */
  --gem-gutter:    clamp(1.25rem, 4vw, 2.5rem);
  --gem-section-y: clamp(4.5rem, 9vw, 8.5rem);
  --gem-container: 1180px;

  --gem-radius:    14px;
  --gem-radius-lg: 22px;
  --gem-radius-pill: 999px;

  --gem-shadow-sm: 0 1px 2px rgba(17, 49, 43, .06),
                   0 4px 14px rgba(17, 49, 43, .05);
  --gem-shadow-md: 0 2px 6px rgba(17, 49, 43, .07),
                   0 18px 44px -12px rgba(17, 49, 43, .18);

  --gem-ease: cubic-bezier(.22, .61, .36, 1);

  /* ---- 4. Semantic (role) tokens --------------------------------------- */
  /* Light ground is the brand default. The G icon rule from the guide: gold G
     only on white, Ozark Pasture, or Saddle Leather — never on Elk River or
     Branded Gold grounds. These roles encode the "safe" pairings. */
  --gem-surface:      var(--gem-white);
  --gem-surface-alt:  #FAF8F4;       /* warm off-white for alternating bands  */
  --gem-surface-dark: var(--gem-ozark);
  --gem-ink:          var(--gem-ozark);
  --gem-ink-muted:    #4A5F5A;
  --gem-ink-on-dark:  var(--gem-white);
  --gem-border:       #E4E7E4;

  --gem-accent:       var(--gem-gold);   /* primary accent / CTAs             */
  --gem-accent-ink:   var(--gem-ozark);  /* text that sits on gold            */
  --gem-link:         var(--gem-river);
}