/* Preppr Design System — colors, type, spacing, radii, shadows.
 * Sourced from: tailwind.config.js + src/styles/globals.css (preppr-exercise)
 *             + /Colours + /Typography + /Spacing (Figma Design-System page)
 */

@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,400&family=Raleway:wght@400;500;600;700&display=swap');

:root {
  /* ========== BRAND ========== */
  --preppr-blue:     #203554;  /* primary-blue — header, sidebar, hero */
  --preppr-green:    #3abb91;  /* primary-green — buttons, active, accent */
  --preppr-teal:     #2dd4a0;  /* active-tab underline accent */
  --ocean-blue:      #0a84c9;  /* secondary blue — links, info */
  --preppr-maroon:   #ae4978;  /* alerts / highlights */
  --preppr-gold:     #eabf54;  /* sparkles, warnings, ledger */
  --preppr-light-blue: #2b95d3;

  /* ========== PRIMARY (green) scale — from Figma /Colours/Primary ========== */
  --primary-100: #c2eadd;
  --primary-200: #a4e0cc;
  --primary-300: #7bd1b5;
  --primary-400: #61c9a7;
  --primary-500: #3abb91;   /* canonical primary */
  --primary-600: #35aa84;
  --primary-700: #298567;
  --primary-800: #206750;
  --primary-900: #184f3d;

  /* ========== SECONDARY (navy) scale — from Figma /Colours/Secondary ========== */
  --secondary-100: #b6c0ca;
  --secondary-200: #93a2b1;
  --secondary-300: #62778d;
  --secondary-400: #203554;  /* canonical secondary (brand navy) */
  --secondary-500: #153455;
  --secondary-600: #132f4d;
  --secondary-700: #0f253c;
  --secondary-800: #0c1d2f;
  --secondary-900: #091624;

  /* ========== OCEAN-BLUE scale ========== */
  --ocean-50:  #e6f3fb;
  --ocean-100: #c4e1f4;
  --ocean-200: #94c9ea;
  --ocean-300: #5badde;
  --ocean-400: #2b95d3;
  --ocean-500: #0a84c9;   /* canonical */
  --ocean-600: #0970ab;
  --ocean-700: #08597f;
  --ocean-800: #0a3e5a;
  --ocean-900: #0a2a3f;

  /* ========== MAROON scale ========== */
  --maroon-50:  #fdf2f6;
  --maroon-100: #fae2ed;
  --maroon-200: #f5c5da;
  --maroon-300: #ec99ba;
  --maroon-400: #d8679a;
  --maroon-500: #ae4978;   /* canonical */
  --maroon-600: #983e68;
  --maroon-700: #7a3253;
  --maroon-800: #5d2741;
  --maroon-900: #431c2f;

  /* ========== GOLD scale ========== */
  --gold-50:  #fdf8ea;
  --gold-100: #faefcc;
  --gold-200: #f5e2a1;
  --gold-300: #f0d07a;
  --gold-400: #eabf54;   /* canonical — spec */
  --gold-500: #d6a634;
  --gold-600: #b08625;
  --gold-700: #856820;
  --gold-800: #65501b;
  --gold-900: #4a3a14;

  /* ========== NEUTRALS ========== */
  --neutral-0:   #ffffff;
  --neutral-50:  #fafafa;
  --neutral-100: #f5f5f5;
  --neutral-200: #e5e5e5;
  --neutral-300: #d4d4d4;
  --neutral-400: #a3a3a3;
  --neutral-500: #737373;
  --neutral-600: #525252;
  --neutral-700: #404040;
  --neutral-800: #262626;
  --neutral-900: #171717;
  --slate-450:   #798a9d;

  /* ========== SEMANTIC — surfaces + text ========== */
  --bg:          #f8f8f8;   /* canonical page bg (dashboard) */
  --bg-alt:      #e6ebed;   /* secondary page bg (auth, shell) */
  --bg-chat:     #eef1f4;   /* chat card bg */
  --bg-elev:     #ffffff;   /* cards, popovers, inputs */
  --bg-chrome:   #203554;   /* header + sidebar */

  --fg:          #171717;   /* body text (neutral-900) */
  --fg-heading:  #1e3a5f;   /* headings (custom per brand notes) */
  --fg-muted:    #5b6670;   /* secondary copy (rgb 91,102,112) */
  --fg-subtle:   #8e98a8;   /* meta / hex labels */
  --fg-on-dark:  #ffffff;
  --fg-on-dark-muted: rgba(255,255,255,0.6);

  --border:       #e5e7ea;
  --border-chrome:rgba(255,255,255,0.10);
  --ring:         #203554;

  /* ========== SEMANTIC — status ========== */
  --success: #3abb91;
  --success-bg: #e4faf3;
  --warning: #eabf54;
  --warning-bg: #fdf8ea;
  --error:   #dc2626;
  --error-bg: #fee2e2;
  --info:    #0a84c9;
  --info-bg: #e6f3fb;

  /* ========== TYPE ========== */
  --font-sans:    'Nunito Sans', Arial, ui-sans-serif, system-ui, sans-serif;
  --font-display: 'Raleway', 'Nunito Sans', Arial, sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Scale — maps 1-1 to Figma /Typography */
  --h1-size: 32px;  --h1-lh: 38px;  --h1-weight: 700;   /* Headline-01 · Raleway Bold 32 */
  --h2-size: 26px;  --h2-lh: 32px;  --h2-weight: 600;   /* Semi-bold 26 */
  --h3-size: 22px;  --h3-lh: 28px;  --h3-weight: 600;   /* Semi-bold 22 */
  --h4-size: 18px;  --h4-lh: 26px;  --h4-weight: 600;
  --large-size:  20px; --large-lh: 28px;
  --body-size:   16px; --body-lh: 24px;
  --body-sm-size:14px; --body-sm-lh: 20px;
  --caption-size:12px; --caption-lh: 16px;

  /* ========== SPACING — 4px base ========== */
  --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;

  /* ========== RADII ========== */
  --radius-sm: 4px;
  --radius-md: 6px;    /* shadcn base (`--radius` - 2px) */
  --radius:    8px;    /* shadcn canonical (0.5rem) */
  --radius-lg: 12px;   /* cards */
  --radius-xl: 16px;   /* welcome-tile / dashboard blocks */
  --radius-2xl:24px;
  --radius-full: 9999px;

  /* ========== ELEVATION ========== */
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.06), 0 2px 4px rgba(0,0,0,0.04);
  --shadow-lg: 0 10px 20px rgba(0,0,0,0.08), 0 6px 6px rgba(0,0,0,0.04);
  --shadow-2xl:0 25px 50px rgba(0,0,0,0.18);
  --shadow-chrome: 0 2px 6px rgba(23,6,59,0.06);
  --shadow-pulse: 0 0 0 0 rgba(111,83,133,0.6);

  /* ========== LAYOUT ========== */
  --header-h:      69px;
  --header-h-mob:  56px;
  --sidebar-open:  280px;
  --sidebar-closed:68px;
}

/* ========== BASE ========== */
html, body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--body-size);
  line-height: var(--body-lh);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--h1-size);
  line-height: var(--h1-lh);
  font-weight: var(--h1-weight);
  color: var(--fg-heading);
  margin: 0 0 var(--space-4) 0;
  letter-spacing: -0.01em;
}
h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--h2-size);
  line-height: var(--h2-lh);
  font-weight: var(--h2-weight);
  color: var(--fg-heading);
  margin: 0 0 var(--space-3) 0;
}
h3, .h3 {
  font-family: var(--font-sans);
  font-size: var(--h3-size);
  line-height: var(--h3-lh);
  font-weight: 600;
  color: var(--fg-heading);
  margin: 0 0 var(--space-3) 0;
}
h4, .h4 {
  font-family: var(--font-sans);
  font-size: var(--h4-size);
  line-height: var(--h4-lh);
  font-weight: 600;
  color: var(--fg-heading);
  margin: 0 0 var(--space-2) 0;
}
p, .body { font-size: var(--body-size); line-height: var(--body-lh); color: var(--fg); margin: 0 0 var(--space-3) 0; }
.body-sm { font-size: var(--body-sm-size); line-height: var(--body-sm-lh); color: var(--fg); }
.caption { font-size: var(--caption-size); line-height: var(--caption-lh); color: var(--fg-muted); }
.large   { font-size: var(--large-size);  line-height: var(--large-lh);  color: var(--fg); }

.muted     { color: var(--fg-muted); }
.subtle    { color: var(--fg-subtle); }
.on-dark   { color: var(--fg-on-dark); }

/* Tag / section label — uppercase tracked */
.eyebrow {
  font-size: 11px; line-height: 14px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-on-dark-muted);
}

a { color: var(--preppr-blue); text-decoration: none; }
a:hover { text-decoration: underline; }

code { font-family: var(--font-mono); font-size: 0.9em; background: var(--neutral-100); padding: 2px 4px; border-radius: var(--radius-sm); }