/* ─────────────────────────────────────────────────────────────────────────
   COHERENCE BRAND — app-owned tokens and surfaces.

   Source: specs/coherence-style.zip (The Coherence Company brand package,
   extracted from coherence.tv). The package's colors_and_type.css is the
   token source of truth; this file re-expresses it as METIS tokens so it
   composes with the platform instead of fighting it.

   Two things are deliberately NOT done here:

   1. The brand's own token NAMES are not introduced globally. The package
      ships --accent, --danger, --font-display, --space-4, --radius-2 … which
      collide with platform tokens of the same name and different values.
      Brand values arrive under a --co-* prefix and are mapped onto platform
      tokens at exactly the points the theme allowlist permits.
   2. --font-ui, the type scale and the spacing scale are not touched. See
      specs/design-system.md §4.2: Coherence's screens are dense operational
      UI sharing components with the rest of METIS, and a body-face swap
      changes row height and truncation in every one of them at once.

   Brand rules encoded here (style.md §5, §7, §11):
     · Teal #4BDBDB is the ONLY accent. Never a second brand hue.
     · Surfaces are white-dominant; ink scale is cold-neutral.
     · Instrument Serif display, Lexend 300 body, italic-in-teal the only
       typographic flourish.
     · Shadows whisper-soft, vertical offset only, no colour except
       --co-shadow-teal on a primary CTA hover.
     · Calligraphy ink motifs replace illustration. No emoji, no imagery.
   ───────────────────────────────────────────────────────────────────────── */

@layer tokens {
  :root {
    /* ── Brand primitives ────────────────────────────────────────────
       Verbatim from the package. Referenced only from the theme mapping
       in tokens/apps.css and from Coherence's own component rules below. */
    --co-teal-050: #EEFBFB;
    --co-teal-100: #D6F6F6;
    --co-teal-200: #B1EFEF;
    --co-teal-300: #9DECEC;
    --co-teal-400: #6FE2E2;
    --co-teal-500: #4BDBDB;
    --co-teal-700: #2BB8B8;
    --co-teal-800: #1F9A9A;
    --co-teal-900: #156D6D;

    --co-ink-050: #F8F8F8;
    --co-ink-100: #F1F1F1;
    --co-ink-200: #E6E6E6;
    --co-ink-300: #C4C4C4;
    --co-ink-400: #9A9A9A;
    --co-ink-500: #777777;
    --co-ink-600: #555555;
    --co-ink-700: #333333;
    --co-ink-800: #1A1A1A;
    --co-ink-900: #0F0F0F;

    --co-surface-off:  #FAFBFB;
    --co-surface-sand: #faf5ec;

    /* The signature wash. Hero / section opener / masthead only — never a
       card background, never short or squat. */
    --co-grad-hero: linear-gradient(180deg,
      var(--co-teal-500) 0%, var(--co-teal-200) 22%, var(--co-teal-100) 38%,
      var(--co-teal-050) 55%, #FFFFFF 80%);
    --co-grad-soft: linear-gradient(180deg, var(--co-teal-050) 0%, #FFFFFF 100%);

    /* Typefaces. Loaded per-route from shell/_fonts_css.html. */
    --co-font-display: "Instrument Serif", "Noto Serif", Georgia, serif;
    --co-font-body:    "Lexend", var(--font-ui);

    --co-shadow-teal: 0 8px 24px rgba(75, 219, 219, 0.25);

    /* ── Brand type scale ────────────────────────────────────────────
       The marketing site's scale, kept under --co-* rather than mapped onto
       --text-*. The platform scale is 14px-rooted and dense; this one is
       16px-rooted and generous. They are different instruments — a Coherence
       page that wants brand metrics asks for them by name. */
    --co-t-display:  72px;
    --co-t-h1:       48px;
    --co-t-h2:       36px;
    --co-t-h3:       28px;
    --co-t-h4:       22px;
    --co-t-h5:       18px;
    --co-t-body-lg:  18px;
    --co-t-body:     16px;
    --co-t-body-sm:  14px;
    --co-t-caption:  12px;
    --co-t-overline: 11px;

    --co-lh-tight:   1.1;
    --co-lh-snug:    1.25;
    --co-lh-normal:  1.5;
    --co-lh-relaxed: 1.65;

    --co-tracking-tight:    -0.02em;
    --co-tracking-body:     -0.005em;
    --co-tracking-overline: 0.22em;

    --co-w-light: 300;

    /* Generous whitespace is part of the brand: section padding 96–160px. */
    --co-space-section:       144px;
    --co-space-section-tight: 96px;
    --co-space-card:          32px;

    /* Cards 12–16px, chips 999px. No large radii — the brand reads serious. */
    --co-radius-card:  12px;
    --co-radius-input: 8px;

    /* Whisper-soft, vertical offset only, no colour but --co-shadow-teal. */
    --co-shadow-1: 0 1px 2px rgba(15, 15, 15, 0.04), 0 1px 1px rgba(15, 15, 15, 0.03);
    --co-shadow-2: 0 2px 8px rgba(15, 15, 15, 0.04), 0 1px 2px rgba(15, 15, 15, 0.03);
    --co-shadow-3: 0 8px 24px rgba(15, 15, 15, 0.06), 0 2px 6px rgba(15, 15, 15, 0.03);

    --co-ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
    --co-dur-2: 180ms;
    --co-dur-3: 260ms;

    --co-ring-focus: 0 0 0 3px rgba(75, 219, 219, 0.35);
  }
}