/* ============================================================
   Personal Design System — Colors & Type
   Emerald + eggshell + gold-accent. Calm, editorial, simple.
   ============================================================ */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/Inter-Variable.ttf') format('truetype-variations');
}
@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/Inter-Italic-Variable.ttf') format('truetype-variations');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/Poppins-Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/Poppins-Medium.ttf') format('truetype');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/Poppins-SemiBold.ttf') format('truetype');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/Poppins-Bold.ttf') format('truetype');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('fonts/Poppins-ExtraBold.ttf') format('truetype');
}
@font-face {
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/Poppins-Italic.ttf') format('truetype');
}

:root {
  /* ============================================================
     COLOR — base palette
     ============================================================ */

  /* Emeralds — primary */
  --emerald-900: #03301f;   /* near-black emerald, used for deep type on light */
  --emerald-800: #054a36;
  --emerald-700: #055f4a;   /* mid-emerald, hovers / accents */
  --emerald-600: #065f46;   /* darker brand emerald — kickers, labels */
  --emerald-500: #047857;   /* PRIMARY EMERALD — the brand colour */
  --emerald-400: #2a7a5d;   /* slightly muted emerald for soft accents */
  --emerald-300: #6aa48d;
  --emerald-200: #b6d3c5;
  --emerald-100: #dceae3;
  --emerald-50:  #eef5f1;

  /* Eggshell / paper — backgrounds */
  --eggshell:        #F7F7F2;   /* canonical page bg */
  --eggshell-warm:   #f6f3ee;   /* slightly warmer paper, slide bg */
  --eggshell-cool:   #fcfbf8;   /* near-white panel surface */
  --paper:           #ffffff;   /* true white, used sparingly */

  /* Ink / text */
  --ink-900: #111111;          /* primary body text */
  --ink-800: #171717;          /* near-black, slide body */
  --ink-700: #2a2a2a;
  --ink-600: #4B5563;          /* secondary text */
  --ink-500: #5f5a54;          /* warm muted */
  --ink-400: #8a857e;
  --ink-300: #b5b1aa;
  --ink-200: #d8d4cd;
  --ink-100: #e9e5dd;

  /* Gold — accent ONLY. Never primary. */
  --gold-500: #d4af37;
  --gold-400: rgba(212, 175, 55, 0.55);
  --gold-300: rgba(212, 175, 55, 0.28);
  --gold-100: rgba(212, 175, 55, 0.10);

  /* Semantic — borrowed from the slide system */
  --danger:   #B91C1C;
  --danger-soft: rgba(185, 28, 28, 0.10);
  --warning:  #d97706;
  --warning-soft: rgba(217, 119, 6, 0.10);
  --info:     #1f4763;
  --info-soft: rgba(29, 71, 99, 0.10);
  --success:  var(--emerald-500);
  --success-soft: rgba(4, 120, 87, 0.10);

  /* Translucent eggshells — on emerald backgrounds */
  --eggshell-72: rgba(247, 247, 242, 0.72);
  --eggshell-45: rgba(247, 247, 242, 0.45);
  --eggshell-22: rgba(247, 247, 242, 0.22);

  /* ============================================================
     COLOR — semantic
     ============================================================ */
  --bg-page:       var(--eggshell);
  --bg-canvas:     var(--eggshell-warm);
  --bg-panel:      rgba(255, 255, 255, 0.55);
  --bg-panel-solid: var(--eggshell-cool);
  --bg-inverse:    var(--emerald-500);

  --fg-1:  var(--ink-900);     /* primary text */
  --fg-2:  var(--ink-600);     /* secondary text */
  --fg-3:  var(--ink-400);     /* tertiary / meta */
  --fg-on-emerald: var(--eggshell);
  --fg-on-emerald-muted: var(--eggshell-72);

  --accent:        var(--emerald-500);
  --accent-strong: var(--emerald-600);
  --accent-soft:   rgba(4, 120, 87, 0.08);

  --hairline:        rgba(17, 17, 17, 0.08);
  --hairline-strong: rgba(17, 17, 17, 0.16);
  --hairline-emerald: rgba(6, 95, 70, 0.14);

  /* ============================================================
     SHADOWS — soft, paper-like
     ============================================================ */
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.05);
  --shadow-md: 0 2px 6px rgba(0,0,0,0.07), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.05);
  --shadow-emerald: 0 3px 10px rgba(4, 120, 87, 0.18), 0 1px 3px rgba(0,0,0,0.08);

  /* ============================================================
     RADII
     ============================================================ */
  --radius-xs: 3px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* ============================================================
     SPACING (4-pt scale)
     ============================================================ */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 56px;
  --space-10: 72px;

  /* ============================================================
     TYPE — families
     ============================================================ */
  --font-sans:    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-display: 'Poppins', 'Inter', system-ui, sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', 'Menlo', 'Cascadia Mono', 'Roboto Mono', monospace;

  /* TYPE — weights */
  --w-regular:    400;
  --w-medium:     500;
  --w-semibold:   600;
  --w-bold:       700;
  --w-extrabold:  800;

  /* TYPE — sizes (rem-based, 1rem = 16px) */
  --t-12: 0.75rem;
  --t-13: 0.8125rem;
  --t-14: 0.875rem;
  --t-15: 0.9375rem;
  --t-16: 1rem;
  --t-18: 1.125rem;
  --t-20: 1.25rem;
  --t-22: 1.375rem;
  --t-24: 1.5rem;
  --t-28: 1.75rem;
  --t-32: 2rem;
  --t-40: 2.5rem;
  --t-48: 3rem;
  --t-56: 3.5rem;
  --t-64: 4rem;

  /* TYPE — line heights */
  --lh-tight:    1.1;
  --lh-snug:     1.25;
  --lh-normal:   1.4;
  --lh-relaxed:  1.55;

  /* TYPE — letter spacing */
  --ls-tight:   -0.025em;
  --ls-snug:    -0.01em;
  --ls-normal:   0;
  --ls-wide:     0.05em;
  --ls-kicker:   0.08em;
}

/* ============================================================
   SEMANTIC TYPE — apply directly
   ============================================================ */

html {
  font-family: var(--font-sans);
  color: var(--fg-1);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.h-display {
  font-family: var(--font-display);
  font-size: var(--t-64);
  font-weight: var(--w-extrabold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--fg-1);
}

.h1, h1 {
  font-family: var(--font-display);
  font-size: var(--t-48);
  font-weight: var(--w-extrabold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--fg-1);
}

.h2, h2 {
  font-family: var(--font-display);
  font-size: var(--t-32);
  font-weight: var(--w-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-snug);
  color: var(--fg-1);
}

.h3, h3 {
  font-family: var(--font-sans);
  font-size: var(--t-24);
  font-weight: var(--w-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-snug);
  color: var(--fg-1);
}

.h4, h4 {
  font-family: var(--font-sans);
  font-size: var(--t-20);
  font-weight: var(--w-semibold);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

.lead {
  font-family: var(--font-sans);
  font-size: var(--t-22);
  font-weight: var(--w-regular);
  line-height: var(--lh-normal);
  color: var(--fg-2);
}

.p, p {
  font-family: var(--font-sans);
  font-size: var(--t-16);
  font-weight: var(--w-regular);
  line-height: var(--lh-relaxed);
  color: var(--fg-1);
  text-wrap: pretty;
}

.small, small {
  font-size: var(--t-13);
  color: var(--fg-2);
}

.kicker {
  font-family: var(--font-sans);
  font-size: var(--t-12);
  font-weight: var(--w-extrabold);
  letter-spacing: var(--ls-kicker);
  text-transform: uppercase;
  color: var(--accent-strong);
}

.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--t-13);
  font-weight: var(--w-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--fg-2);
}

.mono, code, pre, kbd {
  font-family: var(--font-mono);
  font-size: var(--t-14);
}

code {
  background: var(--accent-soft);
  color: var(--accent-strong);
  padding: 1px 5px;
  border-radius: var(--radius-xs);
  font-size: 0.92em;
}

a {
  color: var(--accent-strong);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
a:hover { color: var(--emerald-700); }