/* ============================================================
   ALARIC DESIGN SYSTEM — Colors & Typography
   Generated April 2026
   Fonts: DM Serif Display + Plus Jakarta Sans + JetBrains Mono (Google Fonts)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

/* ── Color Primitives ─────────────────────────────────────── */
:root {
  /* Yellow scale */
  --yellow-50:  oklch(98.5% 0.025 90);
  --yellow-100: oklch(96%   0.060 88);
  --yellow-200: oklch(92%   0.110 87);
  --yellow-300: oklch(87%   0.140 84);
  --yellow-400: oklch(81%   0.155 80);
  --yellow-500: oklch(74%   0.155 74);
  --yellow-600: oklch(65%   0.140 68);
  --yellow-700: oklch(54%   0.120 62);

  /* Sage (green) scale */
  --sage-50:  oklch(97%  0.020 148);
  --sage-100: oklch(93%  0.045 148);
  --sage-200: oklch(87%  0.075 148);
  --sage-300: oklch(78%  0.100 148);
  --sage-400: oklch(66%  0.115 148);
  --sage-500: oklch(55%  0.120 148);
  --sage-600: oklch(44%  0.105 148);

  /* Rose scale */
  --rose-50:  oklch(97%  0.020 15);
  --rose-100: oklch(93%  0.045 15);
  --rose-200: oklch(87%  0.075 12);
  --rose-300: oklch(78%  0.100 12);
  --rose-400: oklch(66%  0.120 14);
  --rose-500: oklch(55%  0.130 15);
  --rose-600: oklch(44%  0.110 15);

  /* Warm neutrals */
  --neutral-0:   oklch(99%   0.008 88);
  --neutral-50:  oklch(97%   0.015 86);
  --neutral-100: oklch(94%   0.022 84);
  --neutral-150: oklch(91%   0.025 82);
  --neutral-200: oklch(87%   0.025 80);
  --neutral-300: oklch(78%   0.020 75);
  --neutral-400: oklch(66%   0.015 70);
  --neutral-500: oklch(55%   0.012 65);
  --neutral-600: oklch(44%   0.010 62);
  --neutral-700: oklch(34%   0.008 60);
  --neutral-800: oklch(24%   0.008 58);
  --neutral-900: oklch(16%   0.006 56);
  --neutral-950: oklch(10%   0.005 55);
}

/* ── Semantic Color Tokens ────────────────────────────────── */
:root {
  /* Backgrounds */
  --bg-base:       var(--neutral-0);
  --bg-subtle:     var(--neutral-50);
  --bg-muted:      var(--neutral-100);
  --bg-card:       #ffffff;

  /* Foregrounds */
  --fg-1:          var(--neutral-950);
  --fg-2:          var(--neutral-700);
  --fg-3:          var(--neutral-500);
  --fg-disabled:   var(--neutral-400);
  --fg-inverse:    var(--neutral-0);

  /* Brand */
  --brand-primary:    var(--yellow-300);
  --brand-primary-hover: var(--yellow-400);
  --brand-primary-press: var(--yellow-500);
  --brand-accent:     var(--yellow-500);

  /* Borders */
  --border-subtle:  var(--neutral-150);
  --border-default: var(--neutral-200);
  --border-strong:  var(--neutral-300);
  --border-brand:   var(--yellow-400);
  --border-focus:   var(--yellow-500);

  /* Status */
  --status-success-bg:   var(--sage-100);
  --status-success-fg:   var(--sage-600);
  --status-success-border: var(--sage-200);

  --status-warning-bg:   var(--yellow-100);
  --status-warning-fg:   var(--yellow-700);
  --status-warning-border: var(--yellow-300);

  --status-danger-bg:    var(--rose-100);
  --status-danger-fg:    var(--rose-600);
  --status-danger-border: var(--rose-200);

  --status-neutral-bg:   var(--neutral-100);
  --status-neutral-fg:   var(--neutral-600);
  --status-neutral-border: var(--neutral-200);

  /* Interactive */
  --interactive-hover-bg:  var(--neutral-50);
  --interactive-active-bg: var(--yellow-100);
  --interactive-selected-border: var(--yellow-400);
}

/* ── Shadows ──────────────────────────────────────────────── */
:root {
  --shadow-xs: 0 1px 2px oklch(0% 0 0 / 0.05);
  --shadow-sm: 0 1px 3px oklch(0% 0 0 / 0.06), 0 2px 6px oklch(0% 0 0 / 0.06);
  --shadow-md: 0 2px 6px oklch(0% 0 0 / 0.06), 0 6px 16px oklch(0% 0 0 / 0.09);
  --shadow-lg: 0 4px 12px oklch(0% 0 0 / 0.07), 0 16px 40px oklch(0% 0 0 / 0.12);
  --shadow-xl: 0 8px 24px oklch(0% 0 0 / 0.08), 0 32px 64px oklch(0% 0 0 / 0.14);
  --shadow-focus: 0 0 0 3px oklch(81% 0.155 80 / 0.40);
  --shadow-focus-danger: 0 0 0 3px oklch(66% 0.120 14 / 0.35);
}

/* ── Border Radius ────────────────────────────────────────── */
:root {
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-pill: 9999px;
}

/* ── Spacing ──────────────────────────────────────────────── */
:root {
  --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;
  --space-20: 80px;
  --space-24: 96px;
}

/* ── Typography Primitives ────────────────────────────────── */
:root {
  --font-display: 'DM Serif Display', Georgia, serif;
  --font-body:    'Plus Jakarta Sans', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', monospace;

  /* Size scale */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-lg:   18px;
  --text-xl:   20px;
  --text-2xl:  24px;
  --text-3xl:  30px;
  --text-4xl:  38px;
  --text-5xl:  48px;
  --text-6xl:  60px;
  --text-7xl:  76px;

  /* Weight */
  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-extrabold: 800;

  /* Line height */
  --leading-tight:  1.15;
  --leading-snug:   1.3;
  --leading-normal: 1.5;
  --leading-relaxed: 1.7;

  /* Letter spacing */
  --tracking-tight:  -0.03em;
  --tracking-snug:   -0.015em;
  --tracking-normal: 0em;
  --tracking-wide:   0.04em;
  --tracking-wider:  0.08em;
  --tracking-widest: 0.12em;
}

/* ── Semantic Type Styles ─────────────────────────────────── */
:root {
  /* Headings */
  --h1-font:    var(--font-display);
  --h1-size:    var(--text-5xl);
  --h1-weight:  var(--weight-regular);
  --h1-leading: var(--leading-tight);
  --h1-tracking: var(--tracking-tight);

  --h2-font:    var(--font-display);
  --h2-size:    var(--text-4xl);
  --h2-weight:  var(--weight-regular);
  --h2-leading: var(--leading-tight);
  --h2-tracking: var(--tracking-tight);

  --h3-font:    var(--font-body);
  --h3-size:    var(--text-2xl);
  --h3-weight:  var(--weight-bold);
  --h3-leading: var(--leading-snug);
  --h3-tracking: var(--tracking-snug);

  --h4-font:    var(--font-body);
  --h4-size:    var(--text-xl);
  --h4-weight:  var(--weight-semibold);
  --h4-leading: var(--leading-snug);
  --h4-tracking: var(--tracking-snug);

  --h5-font:    var(--font-body);
  --h5-size:    var(--text-lg);
  --h5-weight:  var(--weight-semibold);
  --h5-leading: var(--leading-normal);

  /* Body */
  --body-lg-font:    var(--font-body);
  --body-lg-size:    var(--text-lg);
  --body-lg-weight:  var(--weight-regular);
  --body-lg-leading: var(--leading-relaxed);

  --body-font:    var(--font-body);
  --body-size:    var(--text-base);
  --body-weight:  var(--weight-regular);
  --body-leading: var(--leading-normal);

  --body-sm-font:    var(--font-body);
  --body-sm-size:    var(--text-sm);
  --body-sm-weight:  var(--weight-regular);
  --body-sm-leading: var(--leading-normal);

  /* Labels & UI text */
  --label-font:    var(--font-body);
  --label-size:    var(--text-sm);
  --label-weight:  var(--weight-medium);
  --label-leading: var(--leading-tight);
  --label-tracking: var(--tracking-wide);

  --label-xs-font:    var(--font-body);
  --label-xs-size:    var(--text-xs);
  --label-xs-weight:  var(--weight-semibold);
  --label-xs-leading: var(--leading-tight);
  --label-xs-tracking: var(--tracking-widest);

  /* Code */
  --code-font:    var(--font-mono);
  --code-size:    var(--text-sm);
  --code-weight:  var(--weight-regular);
  --code-leading: var(--leading-relaxed);
}

/* ── Utility Classes ──────────────────────────────────────── */

/* Type */
.h1 { font-family: var(--h1-font); font-size: var(--h1-size); font-weight: var(--h1-weight); line-height: var(--h1-leading); letter-spacing: var(--h1-tracking); }
.h2 { font-family: var(--h2-font); font-size: var(--h2-size); font-weight: var(--h2-weight); line-height: var(--h2-leading); letter-spacing: var(--h2-tracking); }
.h3 { font-family: var(--h3-font); font-size: var(--h3-size); font-weight: var(--h3-weight); line-height: var(--h3-leading); letter-spacing: var(--h3-tracking); }
.h4 { font-family: var(--h4-font); font-size: var(--h4-size); font-weight: var(--h4-weight); line-height: var(--h4-leading); letter-spacing: var(--h4-tracking); }
.h5 { font-family: var(--h5-font); font-size: var(--h5-size); font-weight: var(--h5-weight); line-height: var(--h5-leading); }
.body-lg { font-family: var(--body-lg-font); font-size: var(--body-lg-size); font-weight: var(--body-lg-weight); line-height: var(--body-lg-leading); }
.body    { font-family: var(--body-font);    font-size: var(--body-size);    font-weight: var(--body-weight);    line-height: var(--body-leading); }
.body-sm { font-family: var(--body-sm-font); font-size: var(--body-sm-size); font-weight: var(--body-sm-weight); line-height: var(--body-sm-leading); }
.label   { font-family: var(--label-font);   font-size: var(--label-size);   font-weight: var(--label-weight);   line-height: var(--label-leading); letter-spacing: var(--label-tracking); }
.label-xs { font-family: var(--label-xs-font); font-size: var(--label-xs-size); font-weight: var(--label-xs-weight); line-height: var(--label-xs-leading); letter-spacing: var(--label-xs-tracking); text-transform: uppercase; }
.code    { font-family: var(--code-font);    font-size: var(--code-size);    font-weight: var(--code-weight);    line-height: var(--code-leading); }

/* Color utilities */
.fg-1       { color: var(--fg-1); }
.fg-2       { color: var(--fg-2); }
.fg-3       { color: var(--fg-3); }
.fg-inverse { color: var(--fg-inverse); }
.bg-base    { background: var(--bg-base); }
.bg-subtle  { background: var(--bg-subtle); }
.bg-card    { background: var(--bg-card); }
.bg-brand   { background: var(--brand-primary); }