/* ── Tier 1 primitives ─────────────────────────────────────────────────
   Raw values only — no semantic meaning. Themes (see themes/mad.css)
   alias these into `--accent` / `--bg-page` / etc. Adding a new theme
   = a new file that re-maps these primitives to its own aliases. */
:root {
  /* Color primitives — canonical MAD teal is #00D4AA (dark) / #00b894 (light).
     Both are kept as primitives so the theme layer can pick the right one
     per mode without re-deriving. */
  --color-teal-300:  #4FD9C0;
  --color-teal-500:  #00D4AA;
  --color-teal-light:#00B894;
  --color-teal-700:  #008866;

  --color-neutral-0:   #FFFFFF;
  --color-neutral-50:  #F5F7FA;
  --color-neutral-100: #F5F5F5;
  --color-neutral-200: #E4E7EB;
  --color-neutral-300: #D4D4D4;
  --color-neutral-400: #A3A3A3;
  --color-neutral-500: #6B7280;
  --color-neutral-600: #525252;
  --color-neutral-700: #404040;
  /* Dark-tier surfaces — Basecamp-5-aligned true near-black + neutral
     grays. Previously navy-tinted (#1A1E2E / #222738) which read as
     "dark mode with a blue cast". The values below are hue-neutral so
     the page feels black and card insets lift in pure gray.
     Note: --color-text-light below is also #1A1E2E by coincidence — it's
     the navy used for body text on white, so it stays. */
  --color-neutral-800: #161616;
  --color-neutral-850: #1F1F1F;
  --color-neutral-900: #0A0A0A;
  --color-neutral-950: #050505;

  --color-text-dim-dark: #8B8D98;
  --color-text-dark:     #E4E4E7;
  --color-text-light:    #1A1E2E;
  --color-text-dim-light:#6B7280;

  --color-card-dark:        #161616;
  --color-card-border-dark: #262626;

  --color-green-500:  #22C55E;
  --color-green-400:  #4ADE80;
  --color-green-300:  #86EFAC;
  --color-green-200:  #BBF7D0;
  --color-green-800:  #166534;  /* dark green text on tinted-green light bg */

  --color-orange-500: #F97316;
  --color-orange-400: #FBBF24;
  --color-orange-200: #FED7AA;
  --color-orange-800: #92400E;  /* deep amber text on tinted-orange light bg */
  --color-orange-700: #B45309;
  --color-orange-600: #D97706;  /* amber border on the reminders pillow gradient */

  --color-amber-50:   #FEF3C7;  /* lighter end of the reminders pillow gradient */
  --color-amber-100:  #FDE68A;  /* darker end of the reminders pillow gradient */

  --color-red-500:    #EF4444;
  --color-red-400:    #FCA5A5;
  --color-red-200:    #FECACA;
  --color-red-700:    #B91C1C;  /* deep red text on tinted-red light bg */

  --color-yellow-500: #EAB308;
  --color-blue-500:   #3B82F6;
  --color-blue-700:   #0369A1;  /* deep blue text on tinted-blue light bg */
  --color-purple-500: #A855F7;
  --color-indigo-500: #6366F1;
  --color-indigo-600: #4F46E5;  /* skipper title accent in light mode */
  --color-indigo-700: #4338CA;  /* deep indigo text on tinted-indigo light bg */
  --color-teal-800:   #115E59;  /* deep teal text on tinted-teal light bg */
  --color-slate-600:  #475569;  /* neutral header text on near-white bg */
  --color-slate-300:  #CBD0DC;  /* light-on-dark fallback for expired stage */

  /* Typography primitives. Barlow Condensed for hero numbers / display
     headings; Inter for body; JetBrains Mono kept for tabular metric
     columns (overview scorecard) — Barlow doesn't tabulate as cleanly. */
  --font-display: 'Barlow Condensed', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-black:    900;

  /* Type scale */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;
  --text-5xl:  3rem;

  --leading-tight:   1.2;
  --leading-normal:  1.5;
  --leading-relaxed: 1.7;

  --letter-tight:   -0.02em;
  --letter-normal:  0;
  --letter-wide:    0.05em;
  --letter-widest:  0.1em;

  /* Spacing (4px base) */
  --size-1:  0.25rem;
  --size-2:  0.5rem;
  --size-3:  0.75rem;
  --size-4:  1rem;
  --size-5:  1.25rem;
  --size-6:  1.5rem;
  --size-8:  2rem;
  --size-10: 2.5rem;
  --size-12: 3rem;
  --size-16: 4rem;

  /* Radii */
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   8px;
  --radius-xl:   12px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.08);
  --shadow-dark-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-dark-md: 0 4px 12px rgba(0, 0, 0, 0.35);
}