/* =============================================================================
   AGI&M Design Tokens
   Source: docs.agim.ca/vi/ — VI System v1.0 (authoritative)
   Status: CONFIRMED — all values from official AGI&M Visual Identity System
   Last confirmed: 2026-06-17
   ============================================================================= */

:root {

  /* ── Color: Navy Authority Palette ─────────────────────────────────────────
     Five tones from a single hue. Exact hex values from docs.agim.ca/vi/
  -------------------------------------------------------------------------- */
  --navy:       #0B2545;   /* PMS 2965 C — mark A&D, headlines, UI primary   */
  --ocean:      #1B4F8A;   /* PMS 2945 C — links, active states, secondary   */
  --steel:      #4A7FB5;   /* PMS 284 C  — mark B&C, labels, icons, accents  */
  --tint:       #F0F4F8;   /* PMS 9421 C — section alternates, backgrounds   */
  --white:      #FFFFFF;   /* Primary surface                                */

  /* Body text — VI specifies #334455 for body copy (not Navy) */
  --body:       #334455;

  /* Derived / semantic */
  --color-primary:        var(--navy);
  --color-secondary:      var(--ocean);
  --color-accent:         var(--steel);
  --color-text-primary:   var(--navy);
  --color-text-body:      var(--body);
  --color-text-label:     var(--steel);
  --color-text-muted:     var(--steel);
  --color-text-inverse:   var(--white);
  --color-bg-page:        var(--tint);
  --color-bg-surface:     var(--white);
  --color-bg-tint:        var(--tint);
  --color-border:         rgba(11,37,69,.09);
  --color-border-medium:  rgba(11,37,69,.18);
  --color-border-strong:  rgba(11,37,69,.28);
  --color-border-focus:   var(--ocean);

  /* Semantic states */
  --color-success:     #1a6640;
  --color-success-bg:  #f0faf4;
  --color-error:       #b91c1c;
  --color-error-bg:    #fef2f2;
  --color-warning:     #92400e;
  --color-warning-bg:  #fffbeb;

  /* ── Typography ─────────────────────────────────────────────────────────────
     Helvetica Neue is the sole typeface — VI System v1.0
  -------------------------------------------------------------------------- */
  --font: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", "Fira Code", "Courier New", monospace;

  /* Type scale — from VI type specimen */
  --text-display: 72px;  /* weight 200 */
  --text-h1:      52px;  /* weight 300, tracking -0.025em */
  --text-h2:      36px;  /* weight 300, tracking -0.02em  */
  --text-h3:      24px;  /* weight 500, tracking -0.015em */
  --text-body:    15px;  /* weight 400, tracking 0        */
  --text-label:   11px;  /* weight 400, tracking +0.12em, UPPERCASE, Steel */
  --text-brand:   13px;  /* weight 700, tracking +0.10em, UPPERCASE        */
  --text-sm:      13px;
  --text-xs:      11px;

  /* ── Spacing — 8px base unit ────────────────────────────────────────────────
     Token names follow VI grid spec: XS S M L XL 2XL 3XL
  -------------------------------------------------------------------------- */
  --sp-xs:  4px;    /* icon gaps, tight inline      */
  --sp-s:   8px;    /* component internal padding   */
  --sp-m:   16px;   /* label-to-content, list items */
  --sp-l:   24px;   /* grid gutter, card padding    */
  --sp-xl:  48px;   /* section padding, outer margin*/
  --sp-2xl: 72px;   /* section top/bottom           */
  --sp-3xl: 120px;  /* section separation, hero     */

  /* ── Layout ─────────────────────────────────────────────────────────────────
     12-col grid, 24px gutter, 1200px max, outer margins 48/24/16
  -------------------------------------------------------------------------- */
  --gutter-desktop: 48px;
  --gutter-tablet:  24px;
  --gutter-mobile:  16px;
  --max-w:          1200px;
  --max-w-form:     680px;
  --gutter: 48px;   /* responsive override via media queries below */

  /* ── Borders ─────────────────────────────────────────────────────────────────
     VI: industrial aesthetic — no rounding except minimal usability */
  --radius: 0px;
  --radius-xs: 2px;

  /* ── Transitions ─────────────────────────────────────────────────────────── */
  --t: 150ms ease;

  /* ── Form elements ──────────────────────────────────────────────────────── */
  --input-h: 48px;  /* minimum touch target */

}

@media (max-width: 900px)  { :root { --gutter: 24px; } }
@media (max-width: 480px)  { :root { --gutter: 16px; } }