/* --------------------------------------------------------------------------
   ARCMENTOR - design tokens (light theme only - ADR-0008)
   Source of truth for the /app/ PWA. Landing keeps its own styles.css.

   Token NAMES here are dictated by scripts/check-contrast.js (the CI gate):
   the contrast pair table references these exact --arc-* identifiers, and all
   pairs must pass (AAA 7:1 text/action, AA 4.5:1 state badges, 3:1 borders).

   Accessibility note (see WP1 report): the brand red is #DC2626 (theme_color,
   accents, icons). Filled PRIMARY BUTTONS use a darker red (--arc-action-primary
   #9F0712) so white label text clears WCAG AAA (7:1) - #DC2626 with white is
   only ~4.8:1. State "safe-state" uses the same dark red as a text colour
   (must clear AAA on the app/card backgrounds).
   -------------------------------------------------------------------------- */

:root {
  /* -- Backgrounds -- */
  --arc-bg-app:    #F7F7F8;  /* app canvas */
  --arc-bg-card:   #FFFFFF;  /* card / surface */

  /* -- Text (AAA >=7:1 on both backgrounds) -- */
  --arc-text-primary:   #111111;
  --arc-text-secondary: #3A3A3D;
  --arc-text-tertiary:  #525257;

  /* -- State colours (AA-large >=4.5:1, except safe-state AAA >=7:1) -- */
  --arc-state-normal:         #0F6B30;  /* NORMAL */
  --arc-state-degraded-audio: #8C5400;  /* DEGRADED_AUDIO (amber) */
  --arc-state-vision-only:    #0B4FBF;  /* vision-only (info blue) */
  --arc-state-needs-review:   #9A3412;  /* needs review (orange-brown) */
  --arc-state-safe-state:     #9F0712;  /* SAFE STATE (critical red) */
  --arc-state-cloud-unavail:  #475569;  /* cloud unavailable (slate) */
  --arc-state-offline-edge:   #7C4700;  /* edge offline (dark amber) */
  --arc-state-planned:        #5A5A5F;  /* planned / unavailable (grey) */

  /* -- Primary action (white text on this clears AAA >=7:1) -- */
  --arc-action-primary:      #9F0712;
  --arc-action-primary-text: #FFFFFF;

  /* -- Borders (functional, >=3:1 on both backgrounds) -- */
  --arc-border:        #6E6E73;
  --arc-border-subtle: #D4D4D8;  /* decorative hairline (not contrast-gated) */

  /* -- Brand & semantic accents (decorative - not contrast-gated) -- */
  --arc-primary:       #DC2626;  /* brand red - theme_color - icons/accents */
  --arc-primary-bg:    #FEF2F2;
  --arc-info:          #0B4FBF;  /* advisory / AI-recommendation */
  --arc-info-bg:       rgba(11, 79, 191, 0.06);

  /* -- State background tints (decorative) -- */
  --arc-normal-bg:        #F0FDF4;
  --arc-amber-bg:         #FFFBEB;
  --arc-red-bg:           #FEF2F2;
  --arc-slate-bg:         #F1F5F9;

  /* -- Typography -- */
  --arc-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --arc-fs-micro:   10px;
  --arc-fs-caption: 12px;
  --arc-fs-body:    16px;   /* ADR-0008 S9: body >=16px */
  --arc-fs-h2:      20px;
  --arc-fs-h1:      24px;
  --arc-fs-display: 48px;   /* Live Radio Mode big state */
  --arc-fw-regular: 400;
  --arc-fw-medium:  600;
  --arc-fw-bold:    700;
  --arc-tracking-logo: 0.5px;

  /* -- Spacing (4px base) -- */
  --arc-sp-1: 4px;
  --arc-sp-2: 8px;
  --arc-sp-3: 12px;
  --arc-sp-4: 16px;
  --arc-sp-5: 24px;
  --arc-sp-6: 32px;
  --arc-sp-7: 48px;

  /* -- Touch targets (ADR-0008 S9 / task-spec S4) -- */
  --arc-tap-nav:       44px;
  --arc-tap-chip:      48px;
  --arc-tap-secondary: 64px;
  --arc-tap-primary:   72px;

  /* -- Radius / elevation -- */
  --arc-radius-sm: 8px;
  --arc-radius-md: 12px;
  --arc-radius-lg: 16px;
  --arc-shadow-card: 0 1px 3px rgba(0, 0, 0, 0.08);
  --arc-shadow-nav:  0 -1px 4px rgba(0, 0, 0, 0.06);

  /* -- Layout -- */
  --arc-content-max: 480px;  /* mobile-first 360-430px target */
  --arc-z-nav:        100;
  --arc-z-safe-state: 9999;
}