/* ============================================================
   SYMBIO — Colors & Type
   The single source of truth for visual foundations.
   Import this on every page: <link rel="stylesheet" href="colors_and_type.css">
   ============================================================ */

/* --- Webfonts --------------------------------------------------
   Geist (sans) + Geist Mono — primary type system.
   Instrument Serif — editorial italic accent (used sparingly).
   --------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500&family=Instrument+Serif:ital@0;1&display=swap');

:root {
  /* ============================================================
     COLOR — Raw palette
     Named after natural + technical referents.
     Defined in oklch so values stay perceptually consistent.
     ============================================================ */

  /* Greens — brand spine */
  --ink:        oklch(0.18 0.015 158);  /* near-black, slight green warmth */
  --forest:     oklch(0.32 0.055 158);  /* primary brand — deep conifer */
  --pine:       oklch(0.42 0.065 155);  /* hover / pressed darker */
  --moss:       oklch(0.58 0.075 150);  /* mid-green, secondary */
  --sage:       oklch(0.86 0.028 148);  /* pale green-gray surface tint */
  --mist:       oklch(0.94 0.012 150);  /* faintest green — section bg */

  /* Solar — warm photovoltaic accent */
  --solar:      oklch(0.78 0.135 75);   /* amber/gold — primary accent */
  --solar-deep: oklch(0.68 0.155 60);   /* burnt amber — hover/active */
  --solar-pale: oklch(0.94 0.045 85);   /* warm wash bg */

  /* Spark — electric lime, used VERY sparingly (charts, highlights) */
  --spark:      oklch(0.90 0.20 118);

  /* Warm neutrals — paper system */
  --bone:       oklch(0.975 0.008 90);  /* primary bg — warm off-white */
  --paper:      oklch(0.99 0.004 85);   /* elevated surface */
  --stone-1:    oklch(0.93 0.006 90);   /* dividers, faint fills */
  --stone-2:    oklch(0.85 0.008 85);   /* borders */
  --stone-3:    oklch(0.70 0.010 85);   /* fg-subtle */
  --stone-4:    oklch(0.50 0.012 85);   /* fg-muted */
  --stone-5:    oklch(0.30 0.014 90);   /* fg secondary */

  /* Status */
  --success:    oklch(0.55 0.13 150);
  --warning:    oklch(0.75 0.14 75);
  --danger:     oklch(0.58 0.18 28);
  --info:       oklch(0.55 0.11 235);

  /* ============================================================
     COLOR — Semantic roles
     Use THESE in component CSS, not raw names.
     ============================================================ */
  --bg:           var(--bone);
  --bg-elevated:  var(--paper);
  --bg-section:   var(--mist);
  --bg-inverse:   var(--ink);

  --fg:           var(--ink);
  --fg-secondary: var(--stone-5);
  --fg-muted:     var(--stone-4);
  --fg-subtle:    var(--stone-3);
  --fg-inverse:   var(--bone);
  --fg-onbrand:   var(--bone);

  --border:       var(--stone-2);
  --border-strong:var(--stone-3);
  --divider:      var(--stone-1);

  --brand:        var(--forest);
  --brand-hover:  var(--pine);
  --brand-soft:   var(--sage);
  --brand-wash:   var(--mist);

  --accent:       var(--solar);
  --accent-hover: var(--solar-deep);
  --accent-soft:  var(--solar-pale);

  /* ============================================================
     TYPOGRAPHY
     ============================================================ */
  --font-sans:    'Geist', ui-sans-serif, system-ui, sans-serif;
  --font-mono:    'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --font-serif:   'Instrument Serif', ui-serif, Georgia, serif;

  /* Type scale — modular, with slight optical sizing */
  --fs-display-1: clamp(3.5rem, 6vw, 6rem);     /* hero */
  --fs-display-2: clamp(2.5rem, 4.5vw, 4rem);   /* page lead */
  --fs-h1:        2.25rem;   /* 36 */
  --fs-h2:        1.75rem;   /* 28 */
  --fs-h3:        1.375rem;  /* 22 */
  --fs-h4:        1.125rem;  /* 18 */
  --fs-body:      1rem;      /* 16 */
  --fs-body-sm:   0.9375rem; /* 15 */
  --fs-caption:   0.8125rem; /* 13 */
  --fs-micro:     0.6875rem; /* 11 — labels/tags */

  --lh-tight:     1.05;
  --lh-snug:      1.2;
  --lh-normal:    1.45;
  --lh-relaxed:   1.65;

  --tracking-tight:   -0.02em;
  --tracking-normal:  -0.005em;
  --tracking-loose:   0.04em;
  --tracking-caps:    0.12em;

  /* ============================================================
     SPACING — 4px base, geometric scale
     ============================================================ */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  /* ============================================================
     RADII — restrained, never balloon-y
     ============================================================ */
  --radius-xs:  2px;
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  20px;
  --radius-full: 999px;

  /* ============================================================
     SHADOWS — soft, warm, layered. No harsh drops.
     ============================================================ */
  --shadow-xs: 0 1px 2px rgba(40, 35, 25, 0.04);
  --shadow-sm: 0 1px 2px rgba(40, 35, 25, 0.05), 0 1px 3px rgba(40, 35, 25, 0.06);
  --shadow-md: 0 2px 4px rgba(40, 35, 25, 0.05), 0 6px 16px rgba(40, 35, 25, 0.06);
  --shadow-lg: 0 4px 8px rgba(40, 35, 25, 0.04), 0 16px 32px rgba(40, 35, 25, 0.08);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.5);

  /* ============================================================
     MOTION
     ============================================================ */
  --ease-out:  cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in:   cubic-bezier(0.4, 0, 1, 1);
  --ease-std:  cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:  120ms;
  --dur-base:  220ms;
  --dur-slow:  420ms;

  /* ============================================================
     LAYOUT
     ============================================================ */
  --container-narrow: 720px;
  --container-base:   1080px;
  --container-wide:   1280px;
  --container-max:    1440px;
}

/* ============================================================
   BASE — minimal reset + typography defaults
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--fg);
  background: var(--bg);
  font-feature-settings: 'ss01', 'cv11';
}

/* ============================================================
   TYPOGRAPHY — semantic classes
   Use these instead of inline font sizing.
   ============================================================ */
.display-1 {
  font-family: var(--font-sans);
  font-size: var(--fs-display-1);
  font-weight: 500;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
}
.display-2 {
  font-family: var(--font-sans);
  font-size: var(--fs-display-2);
  font-weight: 500;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
}
.display-serif {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
}

h1, .h1 { font-family: var(--font-sans); font-size: var(--fs-h1); font-weight: 600; line-height: var(--lh-snug); letter-spacing: var(--tracking-tight); margin: 0; }
h2, .h2 { font-family: var(--font-sans); font-size: var(--fs-h2); font-weight: 600; line-height: var(--lh-snug); letter-spacing: var(--tracking-tight); margin: 0; }
h3, .h3 { font-family: var(--font-sans); font-size: var(--fs-h3); font-weight: 600; line-height: var(--lh-snug); letter-spacing: var(--tracking-normal); margin: 0; }
h4, .h4 { font-family: var(--font-sans); font-size: var(--fs-h4); font-weight: 600; line-height: var(--lh-snug); margin: 0; }

p, .body  { font-size: var(--fs-body); line-height: var(--lh-relaxed); margin: 0; }
.body-sm  { font-size: var(--fs-body-sm); line-height: var(--lh-normal); }
.caption  { font-size: var(--fs-caption); color: var(--fg-muted); line-height: var(--lh-normal); }

.mono     { font-family: var(--font-mono); font-feature-settings: 'ss01'; }
.mono-sm  { font-family: var(--font-mono); font-size: var(--fs-caption); }
.mono-xs  { font-family: var(--font-mono); font-size: var(--fs-micro); }

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--fg-muted);
}

.serif-em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0.005em;
}

/* ============================================================
   UTILITY — used across cards/kits
   ============================================================ */
.muted { color: var(--fg-muted); }
.subtle { color: var(--fg-subtle); }
.inverse { color: var(--fg-inverse); }