/*
 * Goodcall brand — tokens and rules.  Locked 12 Sep 2026.
 *
 * This file is the brand in CSS: colour, type, radius, and the rules for the
 * mark, so a page can be built to the brand without reading the sheet. It is
 * generated alongside the vectors in design/goodcall/final/ and reviewed at
 *   /brand/brand-sheet/  on the GC4 Playground site.
 *
 * Marks:  wordmark-*.svg (transparent, one colour each), icon-*.svg (tile),
 *         lockup-*.svg, wordmark-animated-*.svg, platform/ (favicon, adaptive).
 *         Highlights are holes: one ink colour per mark, on any approved ground.
 */

:root {
  /* ── Colour ─────────────────────────────────────────── */
  --gc-navy:   #05164C;   /* ink, iris, dark ground. The one navy (2021 cut used #03144F) */
  --gc-teal:   #63D8D4;   /* THE teal: tile, accent, illustration. One teal everywhere */
  --gc-coral:  #EB556D;   /* borders, fills, dots. Means "an action is waiting". Never text */
  --gc-coral-text: #C93552; /* coral for text: 4.7:1 on paper, 5.1:1 on white */
  --gc-yellow: #F9DC62;   /* secondary / draft state */
  --gc-blue:   #3D52F6;   /* tertiary */
  --gc-paper:  #F7F6F3;   /* light ground */
  --gc-white:  #FFFFFF;
  --gc-slate:  #5A6480;   /* secondary text on light */
  --gc-line:   #E3E1DC;   /* hairlines */
  --gc-teal-ink: #1F6F6C; /* teal for text and links on light: 5.9:1 on white, 5.5:1 on paper */

  /* Text on each ground (measured, WCAG): */
  --gc-on-navy:   var(--gc-white);   /* 17.1:1 */
  --gc-on-teal:   var(--gc-navy);    /* 10.0:1 — never white on teal (1.7:1) */
  --gc-on-yellow: var(--gc-navy);    /* 12.6:1 */
  --gc-on-coral:  var(--gc-white);   /* 3.5:1 — large text and graphics only */
  --gc-on-blue:   var(--gc-white);   /* 5.6:1 */
  --gc-on-paper:  var(--gc-navy);    /* 15.9:1 */

  /* ── Type ───────────────────────────────────────────── */
  --gc-font-sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  --gc-font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --gc-weight-display: 800;
  --gc-weight-body: 400;
  --gc-weight-strong: 600;
  --gc-tracking-display: -0.03em;

  /* ── Shape ──────────────────────────────────────────── */
  --gc-radius-tile: 25%;      /* the icon tile: rx 32 on 128 */
  --gc-radius: 0.5rem;
  --gc-radius-pill: 999px;
}

/* ── The mark: rules, not styles ─────────────────────────
   1. One ink colour per mark. Wordmark, icon face, smile: a single fill;
      the tile is a ground. The eye's highlight is a hole — the ground shows.
   2. Colourways are one ink on one ground, from the pairs above. Coral and
      blue grounds take white; teal, yellow and paper take navy. Approved
      exceptions: teal on navy (icon-navy, links on dark); teal-ink, slate
      and coral-text as text on light; the heritage coral wordmark.
   3. The 128 icon is not a favicon. Use platform/favicon.* at 16–48 and
      platform/adaptive-* for Android. Touch/store icons render from the master.
   4. Do not redraw the smile or resize the eyes by hand; regenerate with
      design/goodcall/final/build_final.py. Wordmark smile: width 125.13,
      depth 57.35, stroke 23.46, ends at y 172.13 in the 781×215 box.
   5. In the product, coral is for a waiting action; a healthy screen shows
      none. The heritage coral wordmark (print, merchandise) is the one
      non-UI exception.
   ─────────────────────────────────────────────────────── */

/* ── Minimal base, so a page starts on-brand ──────────── */
.gc-brand {
  background: var(--gc-paper);
  color: var(--gc-navy);
  font-family: var(--gc-font-sans);
  font-weight: var(--gc-weight-body);
  line-height: 1.6;
}
.gc-brand h1, .gc-brand h2, .gc-brand h3 {
  font-weight: var(--gc-weight-display);
  letter-spacing: var(--gc-tracking-display);
  line-height: 1.08;
}
.gc-brand a { color: var(--gc-teal-ink); text-underline-offset: 0.2em; }
.gc-brand code, .gc-brand .gc-mono { font-family: var(--gc-font-mono); }
.gc-brand .gc-muted { color: var(--gc-slate); }
.gc-brand .gc-waiting { color: var(--gc-coral-text); }

.gc-dark { background: var(--gc-navy); color: var(--gc-white); }
.gc-dark a { color: var(--gc-teal); }
.gc-teal { background: var(--gc-teal); color: var(--gc-navy); }

.gc-button {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.75rem 1.25rem;
  border-radius: var(--gc-radius);
  background: var(--gc-teal); color: var(--gc-navy);
  font-weight: var(--gc-weight-strong); text-decoration: none;
}
.gc-button:focus-visible { outline: 2px solid var(--gc-teal-ink); outline-offset: 3px; }