/*
  Design tokens for The Signal Mark.

  Transcribed from the design handoff (design/README.md). This file is the single
  place any colour, size or shadow is defined — every other stylesheet and every
  template refers to these variables and never to a literal value. That is what
  makes a brand change a one-file edit rather than a search-and-replace across
  forty templates.

  If you are about to write a hex code anywhere else in this codebase, stop and
  add it here instead.
*/

:root {
  /* ── Brand ──────────────────────────────────────────────────────────────
     The mark is signal bars whose tops trace a checkmark: signal and approved
     at once. Blue for the bars, green for the tall one on the right. */
  --signal-blue:        #2F6BFF;
  --signal-blue-hover:  #1b4fd6;
  --signal-blue-dark:   #6f9bff;   /* on dark grounds, for contrast */

  --ink-navy:           #0F2140;   /* headings, seal ground, dark bands */
  --ink-panel:          #16294c;   /* the darker panel inside a navy band */
  --ink-hairline:       #24365c;   /* a border that reads on navy */

  --verified-green:     #12B76A;
  --green-on-dark:      #2ee29a;
  --green-text:         #12704a;
  --green-fill:         #e7f8f0;
  --green-border:       #b8ead1;

  --sky:                #CFE0FF;   /* light fills, seal text */
  --blue-tint:          #eaf0ff;   /* icon tiles, reply background */

  /* ── Surfaces ───────────────────────────────────────────────────────── */
  --paper:              #F4F6FB;   /* the page */
  --surface:            #ffffff;
  --hairline:           #e6ebf5;
  --input-border:       #e0e7f4;
  --track:              #eef2f9;   /* progress bar track */

  /* ── Text ───────────────────────────────────────────────────────────── */
  --text-body:          #54627d;
  --text-strong:        #3b4a63;
  --text-muted:         #8090aa;
  --text-muted-alt:     #93a0b6;
  --nav-inactive:       #5b6b86;

  /* ── Status ─────────────────────────────────────────────────────────────
     Never colour alone. Every status is icon AND colour AND label, because a
     buyer who cannot distinguish green from amber still has to be able to tell
     a verified credential from one that has lapsed. */
  --star-gold:          #f5a623;
  --star-gold-dark:     #ffc857;

  --amber-text:         #b7791f;
  --amber-bg:           #fffdf5;
  --amber-fill:         #fdf1d6;
  --amber-border:       #f0e2c4;

  --red-text:           #c0392b;
  --red-text-alt:       #e5484d;
  --red-bg:             #fdeaea;
  --red-bg-soft:        #fdf7f7;
  --red-border:         #f5d9d9;

  /* ── Typography ─────────────────────────────────────────────────────────
     Plus Jakarta Sans for everything, IBM Plex Mono for the embed snippet.
     Self-hosted — see web/vendor/fonts.css. A directory whose whole promise is
     reliability should not have its typography depend on fonts.googleapis.com
     being reachable, and shipping the fonts also keeps visitors' requests off a
     third party, which is one less thing to explain in a privacy notice. */
  --font-ui:   "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system,
               "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --fs-hero:    52px;
  --fs-h1:      32px;
  --fs-h2:      30px;
  --fs-h3:      19px;
  --fs-lead:    20px;
  --fs-body:    15px;
  --fs-small:   14px;
  --fs-tiny:    13px;
  --fs-micro:   11px;

  --lh-hero:    1.03;
  --lh-heading: 1.15;
  --lh-body:    1.6;

  --tracking-tight:   -0.02em;   /* headings and the wordmark */
  --tracking-eyebrow:  0.12em;   /* uppercase section labels */

  /* ── Radius ─────────────────────────────────────────────────────────── */
  --r-pill:   999px;
  --r-band:   24px;
  --r-card:   16px;
  --r-panel:  20px;
  --r-input:  11px;
  --r-chip:   8px;
  --r-tile:   12px;

  /* ── Spacing ────────────────────────────────────────────────────────── */
  --container:       1180px;
  --container-tight: 1080px;   /* profile and dashboard */
  --pad-x:           22px;
  --pad-card:        24px;
  --gap:             18px;
  --rhythm:          44px;     /* between labelled blocks */

  /* ── Shadows ────────────────────────────────────────────────────────── */
  --shadow-hairline: 0 1px 2px rgba(15, 33, 64, 0.04);
  --shadow-badge:    0 2px 8px rgba(15, 33, 64, 0.06);
  --shadow-card:     0 4px 20px rgba(15, 33, 64, 0.06);
  --shadow-profile:  0 8px 30px rgba(15, 33, 64, 0.07);
  --shadow-search:   0 12px 40px rgba(15, 33, 64, 0.10);

  /* Focus ring. Deliberately loud: this is a service used by people who may be
     navigating by keyboard, and a subtle focus indicator is no indicator. */
  --focus-ring: 0 0 0 3px rgba(47, 107, 255, 0.35);
}