/* =============================================================================
   verAIficATor design tokens.

   Shared with the WordPress theme "trs" (transparency-site): palette taken
   from the brand mark's pixels (navy #093259, blue #1e66ac) and extended into
   a calm paper-and-ink scheme. Application tokens (status colours, forms) are
   added here; the only saturated colour with meaning is --ok, reserved for the
   VERIFIED indicator. A0-A4 / V0-V3 levels never get a colour.

   Dark scheme: one complete token set (never recolour single components),
   every text token >= 4.5:1 on its surface, --text-on-accent >= 4.5:1 on
   --blue. Users can force a scheme with <html data-theme="light|dark">.
   ========================================================================== */
@font-face {
  font-family: "Inter var";
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/inter-var-latin.woff2") format("woff2");
}

:root {
  color-scheme: light;

  /* surfaces */
  --paper:       #faf9f6;
  --surface:     #ffffff;
  --surface-2:   #f2f5f9;
  --surface-3:   #e9eef5;
  /* text */
  --ink:         #0d2340;
  --ink-2:       #22384f;
  --muted:       #4b5d73;
  --faint:       #56677b;
  /* lines */
  --line:        #dde4ec;
  --line-strong: #c3cfdc;
  /* brand */
  --navy:        #0b2a4a;
  --navy-2:      #093259;
  --blue:        #1e66ac;
  --blue-600:    #17548f;
  --blue-50:     #eef4fb;
  --blue-100:    #dce8f6;
  --text-on-accent: #ffffff;
  --text-on-navy:   #ffffff;
  --muted-on-navy:  #c4d4e8;
  --faint-on-navy:  #8fb3db;
  --line-on-navy:   rgba(255, 255, 255, 0.14);
  /* status (system states only) */
  --ok:        #1f7a4d;
  --ok-50:     #e8f4ed;
  --warn:      #8a5a00;
  --warn-50:   #fbf3e2;
  --danger:    #a3262a;
  --danger-50: #fbecec;
  --focus:     #1e66ac;

  /* type */
  --font:       "Inter var", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, "Source Serif Pro", Georgia, "Times New Roman", serif;
  --font-mono:  ui-monospace, "SFMono-Regular", "JetBrains Mono", Menlo, Consolas, monospace;

  --step--2: clamp(0.76rem, 0.74rem + 0.08vw, 0.8rem);
  --step--1: clamp(0.88rem, 0.86rem + 0.1vw, 0.93rem);
  --step-0:  clamp(1rem, 0.97rem + 0.15vw, 1.075rem);
  --step-1:  clamp(1.15rem, 1.1rem + 0.25vw, 1.3rem);
  --step-2:  clamp(1.35rem, 1.25rem + 0.5vw, 1.65rem);
  --step-3:  clamp(1.6rem, 1.42rem + 0.9vw, 2.15rem);
  --step-4:  clamp(1.95rem, 1.6rem + 1.6vw, 2.9rem);
  --step-5:  clamp(2.3rem, 1.8rem + 2.4vw, 3.7rem);

  /* space */
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1.25rem;
  --space-lg:  2rem;
  --space-xl:  3rem;
  --space-2xl: clamp(3.5rem, 2.8rem + 3vw, 5.5rem);

  /* shape */
  --radius-sm: 6px;
  --radius:    10px;
  --radius-lg: 16px;
  --shadow-sm: 0 1px 2px rgba(13, 35, 64, 0.06);
  --shadow:    0 1px 2px rgba(13, 35, 64, 0.05), 0 8px 24px -12px rgba(13, 35, 64, 0.18);
  --shadow-lg: 0 2px 4px rgba(13, 35, 64, 0.05), 0 24px 48px -20px rgba(13, 35, 64, 0.28);

  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --container: 1200px;
  --container-text: 68ch;
  --gutter: clamp(1rem, 4vw, 2rem);
  --header-h: 60px;
  --touch: 2.75rem; /* 44px */
}

@media (min-width: 75rem) {
  :root { --header-h: 72px; }
}

/* Dark scheme: full token set. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper:       #0f1720;
    --surface:     #151f2a;
    --surface-2:   #1b2733;
    --surface-3:   #22303e;
    --ink:         #e8eef5;
    --ink-2:       #cbd5e1;
    --muted:       #a3b3c6;
    --faint:       #97a8bb;
    --line:        #26344a;
    --line-strong: #3a4b63;
    --navy:        #0a1826;
    --navy-2:      #0b2a4a;
    --blue:        #8fc0f4;
    --blue-600:    #b5d5f8;
    --blue-50:     #17293d;
    --blue-100:    #1d3550;
    --text-on-accent: #04101f;
    --ok:        #7fd3a3;
    --ok-50:     #12301f;
    --warn:      #e8bd6a;
    --warn-50:   #332609;
    --danger:    #f09a9a;
    --danger-50: #3a1618;
    --focus:     #8fc0f4;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow:    0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px -12px rgba(0, 0, 0, 0.6);
    --shadow-lg: 0 2px 4px rgba(0, 0, 0, 0.4), 0 24px 48px -20px rgba(0, 0, 0, 0.7);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper:       #0f1720;
  --surface:     #151f2a;
  --surface-2:   #1b2733;
  --surface-3:   #22303e;
  --ink:         #e8eef5;
  --ink-2:       #cbd5e1;
  --muted:       #a3b3c6;
  --faint:       #97a8bb;
  --line:        #26344a;
  --line-strong: #3a4b63;
  --navy:        #0a1826;
  --navy-2:      #0b2a4a;
  --blue:        #8fc0f4;
  --blue-600:    #b5d5f8;
  --blue-50:     #17293d;
  --blue-100:    #1d3550;
  --text-on-accent: #04101f;
  --ok:        #7fd3a3;
  --ok-50:     #12301f;
  --warn:      #e8bd6a;
  --warn-50:   #332609;
  --danger:    #f09a9a;
  --danger-50: #3a1618;
  --focus:     #8fc0f4;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow:    0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px -12px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 2px 4px rgba(0, 0, 0, 0.4), 0 24px 48px -20px rgba(0, 0, 0, 0.7);
}