/*
  ----------------------------------------
  Theme - Design tokens
  ----------------------------------------
*/

/* Fonts */
@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");

:root {
  /* ─── Typography ─────────────────────────────────── */
  --font-body:    "Inter", system-ui, sans-serif;
  --font-heading: "Inter", system-ui, sans-serif;
  --font-mono:    ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, monospace;

  --font-normal:   400;
  --font-medium:   500;
  --font-semibold: 600;
  --font-bold:     700;

  /* ─── Primary (Navy) ─────────────────────────────── */
  --brand-1-50:  #EDF3FF;   /* Lightest tint — backgrounds */
  --brand-1-200: #8FA0C3;   /* Muted navy — borders, disabled */
  --brand-1:     #162D5C;   /* Base navy */
  --brand-1-900: #021438;   /* Deepest navy — hover/active */

  /* Legacy alias */
  --brand-1-light: #EDF3FF;

  /* ─── Brand Green (Success-adjacent) ────────────── */
  --brand-2-50:  #F4F8E5;
  --brand-2-200: #A6B88E;
  --brand-2:     #4F7B28;
  --brand-2-900: #395F18;

  --brand-2-light: #F4F8E5;

  /* ─── Brand Blue (Info-adjacent) ─────────────────── */
  --brand-3-50:  #F0F8FF;
  --brand-3-200: #9CBEDD;
  --brand-3:     #195FA5;
  --brand-3-900: #0E4175;

  --brand-3-light: #F0F8FF;

  /* ─── Brand Amber (Warning-adjacent) ─────────────── */
  --brand-4-50:  #FAEFDA;
  --brand-4-200: #B0997E;
  --brand-4:     #8D5819;
  --brand-4-900: #663D0C;

  --brand-4-light: #FAEFDA;

  /* ─── Neutral Scale ──────────────────────────────── */
  --white:    #FFFFFF;
  --lighter:  #F4F4F5;   /* Zinc 100 — page backgrounds */
  --light:    #D1D5DB;   /* Gray 300 — borders, dividers */
  --midtone:  #6B7280;   /* Gray 500 — placeholder, icons */
  --dark:     #374151;   /* Gray 700 — secondary text */
  --darker:   #1F2937;   /* Gray 800 — primary text */
  --black:    #111827;   /* Gray 900 */

  /* Extended gray scale */
  --gray-50:  #F9FAFB;
  --gray-100: #F3F4F6;
  --gray-200: #E5E7EB;
  --gray-300: #D1D5DB;
  --gray-400: #9CA3AF;
  --gray-500: #6B7280;
  --gray-600: #4B5563;
  --gray-700: #374151;
  --gray-800: #1F2937;
  --gray-900: #111827;

  /* ─── Secondary (Gray Component) ────────────────── */
  --secondary-bg:   #F0F0F0;   /* Gray button/badge background */
  --secondary-text: #27272A;   /* Gray button/badge text (zinc-800) */

  /* ─── Semantic Text Colors ───────────────────────── */
  --text-heading: #182320;   /* Near-black with green warmth */
  --text-body:    #3D4E49;   /* Dark teal-gray — body copy */
  --text-muted:   #6B7280;   /* Gray 500 — secondary */
  --text-meta:    #909090;   /* Zinc 500 — captions, timestamps */
  --text-on-dark: #FFFFFF;

  /* ─── Semantic Status Colors ─────────────────────── */
  --success:       #4F7B28;
  --success-light: #F4F8E5;
  --success-mid:   #A6B88E;
  --success-dark:  #395F18;

  --info:       #195FA5;
  --info-light: #F0F8FF;
  --info-mid:   #9CBEDD;
  --info-dark:  #0E4175;

  --warning:       #8D5819;
  --warning-light: #FAEFDA;
  --warning-mid:   #B0997E;
  --warning-dark:  #663D0C;

  --error:       #AC0918;
  --error-light: #FFF0F0;
  --error-mid:   #C27980;
  --error-dark:  #7B1720;

  --link:      #195FA5;
  --highlight: #FAEFDA;

  /* ─── Border ─────────────────────────────────────── */
  --border:    1px;
  --border-sm: 0.5px;
  --border-lg: 2px;

  /* ─── Radius ─────────────────────────────────────── */
  --rounded-sm: 0.125rem;   /* 2px  */
  --rounded:    0.25rem;    /* 4px  */
  --rounded-md: 0.375rem;   /* 6px  */
  --rounded-lg: 0.5rem;     /* 8px  */
  --rounded-xl: 0.75rem;    /* 12px */
  --rounded-full: 9999px;

  /* ─── Shadow ─────────────────────────────────────── */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow:    0 4px 4px 1px rgb(0 0 0 / 0.15), 0 2px 4px -2px rgb(0 0 0 / 0.25);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);

  /* ─── Layout ─────────────────────────────────────── */
  --max-w-text:       80ch;
  --max-w-form:       40rem;
  --container-max:    1200px;
  --container-padding: 0 var(--space-lg);

  /* ─── Component Heights ───────────────────────────── */
  --height-sm: 2.25rem;   /* 36px — button/input */
  --height-md: 4rem;      /* 64px — site header/nav */
  --height-lg: 5rem;      /* 80px — tall header variant */

  /* ─── Fluid Text Scale ────────────────────────────
     Generated with: `npx prewindcss text`
     Min viewport: 320px  | Max viewport: 1600px
     Min base: 15px       | Max base: 18px
     Min ratio: 1.25      | Max ratio: 1.414
  */
  --text-xs:  0.9375rem; /* 15px floor */
  --text-sm:  0.9375rem; /* 15px floor */
  --text-base: clamp(0.9375rem, 0.8906rem + 0.2344vw, 1.125rem);
  --text-lg:  clamp(1.094rem, 0.9695rem + 0.6212vw, 1.591rem);
  --text-xl:  clamp(1.367rem, 1.147rem  + 1.103vw,  2.249rem);
  --text-2xl: clamp(1.709rem, 1.341rem  + 1.839vw,  3.181rem);
  --text-3xl: clamp(2.136rem, 1.546rem  + 2.951vw,  4.497rem);
  --text-4xl: clamp(2.67rem,  1.748rem  + 4.611vw,  6.359rem);

  /* ─── Fluid Space Scale ───────────────────────────
     Generated with: `npx prewindcss space`
     Min viewport: 320px  | Max viewport: 1600px
     Min sm: 15px         | Max sm: 18px
     Min ratio: 1.5       | Max ratio: 1.667
  */
  --space-3xs: clamp(0.2222rem, 0.2171rem + 0.02579vw, 0.2429rem);
  --space-2xs: clamp(0.3333rem, 0.3155rem + 0.08938vw, 0.4048rem);
  --space-xs:  clamp(0.5rem,    0.4563rem + 0.2186vw,  0.6749rem);
  --space-sm:  clamp(0.75rem,   0.6563rem + 0.4688vw,  1.125rem);
  --space-md:  clamp(1.125rem,  0.9374rem + 0.938vw,   1.875rem);
  --space-lg:  clamp(1.688rem,  1.328rem  + 1.798vw,   3.126rem);
  --space-xl:  clamp(2.531rem,  1.861rem  + 3.35vw,    5.211rem);
  --space-2xl: clamp(3.797rem,  2.574rem  + 6.113vw,   8.688rem);
  --space-3xl: clamp(5.695rem,  3.499rem  + 10.98vw,  14.48rem);
  --space-4xl: clamp(8.543rem,  4.643rem  + 19.5vw,   24.14rem);

  /* ─── Breakpoints ────────────────────────────────── */
  --bp-sm:   36rem;   /* 576px  — mobile/small */
  --bp-md:   48rem;   /* 768px  — tablet */
  --bp-lg:   56rem;   /* 896px  — desktop nav */
  --bp-xl:   64rem;   /* 1024px — wide */
}