/* ALL24 Design System — Color Tokens */

:root {
  /* ── Brand & Accent ─────────────────────────────────── */
  /** Primary navy. CTAs, logo mark, primary buttons, active states. */
  --color-primary:          #1d3461;
  /** Darkened primary for hover. */
  --color-primary-hover:    #172d54;
  /** Deepest press/active state. */
  --color-primary-active:   #102040;
  /** Pale tint for disabled CTAs. */
  --color-primary-disabled: #c4d0e2;
  /** Signal Blue — accent for links, highlights, active indicators. Derived from the wifi/signal motif. */
  --color-accent:           #0090d4;
  /** Signal Blue hover. */
  --color-accent-hover:     #007ab5;

  /* ── Surface ────────────────────────────────────────── */
  /** Default page canvas. */
  --color-canvas:           #ffffff;
  /** Lightest fill — disabled fields, hover backgrounds, subtle bands. */
  --color-surface-soft:     #f7f9fc;
  /** Heavier fill — icon-button surfaces, input disabled. */
  --color-surface-strong:   #eef1f6;

  /* ── Hairlines & Borders ────────────────────────────── */
  /** Default 1px border — inputs, card borders, dividers. */
  --color-hairline:         #dde3ec;
  /** Lighter divider — long-form editorial separators. */
  --color-hairline-soft:    #eef1f6;
  /** Heavier stroke — disabled outlines, focused border fallback. */
  --color-border-strong:    #c1cdd8;

  /* ── Text ───────────────────────────────────────────── */
  /** Dominant text. Headlines, body, primary nav. */
  --color-ink:              #111827;
  /** Secondary running text inside long-form copy. */
  --color-body:             #374151;
  /** Sub-titles, inactive tabs, footer labels, "View all" links. */
  --color-muted:            #6b7280;
  /** Disabled link text, placeholder. */
  --color-muted-soft:       #9ca3af;
  /** Text on primary (navy) backgrounds. */
  --color-on-primary:       #ffffff;

  /* ── Semantic ───────────────────────────────────────── */
  /** Inline error text for form validation. */
  --color-error:            #dc2626;
  /** Error on hover. */
  --color-error-hover:      #b91c1c;
  /** Success green. */
  --color-success:          #16a34a;
  /** Warning amber. */
  --color-warning:          #d97706;
  /** Default link color (same as primary for brand cohesion). */
  --color-link:             #1d3461;
  /** Legal / fine-print links where a distinct blue is needed. */
  --color-legal-link:       #2563eb;

  /* ── Scrim ──────────────────────────────────────────── */
  /** Modal backdrop base. Apply at 50% opacity at render time. */
  --color-scrim:            #000000;
}