/* ============================================================
   CricLogs Theme — the single source of truth for design tokens.
   Tier 1 = primitives (raw palette). Tier 2 = semantic tokens.
   Components use ONLY Tier-2 tokens — never a raw hex, never a primitive.
   See docs/THEME.md for the full reference.
   ============================================================ */
:root {
  /* ---- Tier 1: primitives (raw palette) ---- */
  --blue-50:  #f0f6ff;
  --blue-100: #D6E3FF;
  --blue-300: #86C1FF; /* no semantic token maps to this yet — add one before using it in components */
  --blue-600: #005FAC;
  --blue-700: #004d8f;
  --navy-900: #001C3A;
  --grey-100: #f4f4f4;
  --grey-200: #ebebeb;
  --grey-300: #e0e0e0;
  --grey-400: #aaaaaa;
  --grey-500: #555555;
  --red-600:  #cc0000;
  --white:    #ffffff;

  /* ---- Tier 2: semantic colors (use THESE in components) ---- */
  --color-primary:          var(--blue-600);
  --color-primary-hover:    var(--blue-700);
  --color-on-primary:       var(--white);
  --color-primary-subtle:   var(--blue-50);
  --color-primary-muted:    var(--blue-100);

  --color-text:             var(--navy-900);
  --color-text-muted:       var(--grey-500);
  --color-text-placeholder: var(--grey-400);
  --color-on-dark:          var(--white);
  --color-on-dark-muted:    var(--grey-400);

  --color-surface:          var(--white);
  --color-surface-alt:      var(--blue-50);
  --color-surface-muted:    var(--grey-100);
  --color-surface-muted-hover: var(--grey-200);
  --color-surface-inverse:  var(--navy-900);

  --color-border:           var(--blue-100);
  --color-border-neutral:   var(--grey-300);
  --color-danger:           var(--red-600);

  /* ---- Radii ---- */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-pill: 999px;

  /* ---- Shadows ---- */
  --shadow-nav:  0 2px 12px rgba(0,95,172,0.10);
  --shadow-card: 0 4px 24px rgba(0,95,172,0.08);

  /* ---- Typography ---- */
  --font-family-base: 'Inter', system-ui, -apple-system, sans-serif;
  --font-weight-regular:  400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;
  --font-weight-extrabold:800;
  --font-weight-black:    900;

  /* ---- Spacing scale (for NEW work; existing px left as-is) ---- */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 20px;  --space-6: 24px;  --space-8: 32px;  --space-10: 40px;
  --space-12: 48px; --space-16: 64px;
}

/* Breakpoints (CSS can't store these in variables — documented in THEME.md):
   sm 480px · md 640px · lg 768px · xl 1280px */