/* ============================================================
   TYTO BIODATA — Colors & Type
   Source: Marca Tyto mini manual.pdf
   ============================================================ */

/* ---------- Webfont imports ----------
   Licensed font files in /fonts:
     • Saffran   — display, headlines (Thin → ExtraBold)
     • Dystopian — display alt / numerals (Light, Regular, Bold, Black)
     • Inter     — body, UI (variable + 18pt static)
*/

/* Saffran (display) */
@font-face { font-family: 'Saffran'; font-style: normal; font-weight: 100; font-display: swap;
  src: url('fonts/Saffran-Thin.woff2') format('woff2'), url('fonts/Saffran-Thin.woff') format('woff'); }
@font-face { font-family: 'Saffran'; font-style: normal; font-weight: 300; font-display: swap;
  src: url('fonts/Saffran-Light.woff2') format('woff2'); }
@font-face { font-family: 'Saffran'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/Saffran-Regular.woff2') format('woff2'); }
@font-face { font-family: 'Saffran'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('fonts/Saffran-Medium.woff2') format('woff2'); }
@font-face { font-family: 'Saffran'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('fonts/Saffran-Bold.woff2') format('woff2'); }
@font-face { font-family: 'Saffran'; font-style: normal; font-weight: 800; font-display: swap;
  src: url('fonts/Saffran-ExtraBold.woff2') format('woff2'), url('fonts/Saffran-ExtraBold.woff') format('woff'); }

/* Dystopian (numeric / display alt) */
@font-face { font-family: 'Dystopian'; font-style: normal; font-weight: 300; font-display: swap;
  src: url('fonts/fonnts.com-Dystopian_Ligth.otf') format('opentype'); }
@font-face { font-family: 'Dystopian'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/fonnts.com-Dystopian_Regular.otf') format('opentype'); }
@font-face { font-family: 'Dystopian'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('fonts/fonnts.com-Dystopian_Bold.otf') format('opentype'); }
@font-face { font-family: 'Dystopian'; font-style: normal; font-weight: 900; font-display: swap;
  src: url('fonts/fonnts.com-Dystopian_Black.otf') format('opentype'); }

/* Inter (body) — variable font with full weight range */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('fonts/Inter-VariableFont_opsz_wght.ttf') format('truetype-variations'); }
@font-face { font-family: 'Inter'; font-style: italic; font-weight: 100 900; font-display: swap;
  src: url('fonts/Inter-Italic-VariableFont_opsz_wght.ttf') format('truetype-variations'); }

:root {
  /* ---------- Brand Colors (from manual) ---------- */
  --tyto-lime:        #83cc16;  /* primary brand green — owl halo, energy */
  --tyto-lime-soft:   #cde0a1;  /* light lime, surfaces / chart fills */
  --tyto-forest:      #19793c;  /* deep forest green, accents */
  --tyto-slate:       #94a2b8;  /* cool gray, dividers / muted */
  --tyto-ink:         #1d293b;  /* dark slate — secondary dark, owl outline */
  --tyto-night:       #0e0e1a;  /* near-black — primary dark, headings */
  --tyto-white:       #ffffff;
  --tyto-paper:       #f7f8f5;  /* warm off-white background */
  --tyto-bone:        #ecefe5;  /* card / surface tint */

  /* ---------- Color scales (programmatic, for charts/states) ---------- */
  --lime-50:  #f4fae4;
  --lime-100: #e6f3c2;
  --lime-200: #cde0a1;
  --lime-300: #b3d472;
  --lime-400: #9bd040;
  --lime-500: #83cc16;   /* base */
  --lime-600: #6aa811;
  --lime-700: #51810f;
  --lime-800: #3a5d0c;
  --lime-900: #233a07;

  --forest-500: #19793c;
  --forest-600: #146030;
  --forest-700: #0f4824;

  --ink-50:  #f1f3f7;
  --ink-100: #dbe0ea;
  --ink-200: #94a2b8;   /* slate */
  --ink-300: #5b6b86;
  --ink-400: #34445e;
  --ink-500: #1d293b;   /* ink */
  --ink-600: #131c2b;
  --ink-700: #0e0e1a;   /* night */

  /* ---------- Semantic ---------- */
  --bg:            var(--tyto-paper);
  --bg-elevated:   var(--tyto-white);
  --bg-inverted:   var(--tyto-night);
  --surface:       var(--tyto-white);
  --surface-soft:  var(--tyto-bone);

  --fg:            var(--tyto-night);
  --fg-muted:      var(--ink-400);
  --fg-subtle:     var(--ink-300);
  --fg-on-dark:    var(--tyto-paper);
  --fg-on-accent:  var(--tyto-night);

  --accent:        var(--tyto-lime);
  --accent-hover:  var(--lime-600);
  --accent-press:  var(--lime-700);
  --accent-soft:   var(--tyto-lime-soft);

  --border:        rgba(14, 14, 26, 0.10);
  --border-strong: rgba(14, 14, 26, 0.22);
  --divider:       rgba(14, 14, 26, 0.06);

  --success: #19793c;
  --warning: #d97706;
  --danger:  #b91c1c;
  --info:    #1d293b;

  /* ---------- Type families ---------- */
  --font-logo:    'Saffran', system-ui, sans-serif;        /* logo lockup ONLY */
  --font-display: 'Dystopian', system-ui, sans-serif;       /* headlines, display */
  --font-numeric: 'Dystopian', system-ui, sans-serif;       /* stats, counters */
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ---------- Type scale ---------- */
  --fs-xs:   12px;
  --fs-sm:   14px;
  --fs-md:   16px;
  --fs-lg:   18px;
  --fs-xl:   22px;
  --fs-2xl:  28px;
  --fs-3xl:  36px;
  --fs-4xl:  48px;
  --fs-5xl:  64px;
  --fs-6xl:  88px;

  --lh-tight:  1.05;
  --lh-snug:   1.2;
  --lh-normal: 1.5;
  --lh-loose:  1.7;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-wider:  0.12em;

  /* ---------- Spacing (4px base) ---------- */
  --space-0:  0;
  --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;

  /* ---------- Radii ---------- */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-2xl:  32px;
  --radius-pill: 999px;

  /* ---------- Shadows ---------- */
  --shadow-xs: 0 1px 2px rgba(14, 14, 26, 0.05);
  --shadow-sm: 0 2px 6px rgba(14, 14, 26, 0.06), 0 1px 2px rgba(14, 14, 26, 0.04);
  --shadow-md: 0 8px 24px rgba(14, 14, 26, 0.08), 0 2px 6px rgba(14, 14, 26, 0.04);
  --shadow-lg: 0 16px 48px rgba(14, 14, 26, 0.10), 0 4px 12px rgba(14, 14, 26, 0.06);
  --shadow-glow: 0 0 0 4px rgba(131, 204, 22, 0.25);
  --shadow-inset: inset 0 0 0 1px rgba(14, 14, 26, 0.06);

  /* ---------- Motion ---------- */
  --ease-out:   cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in:    cubic-bezier(0.6, 0, 0.8, 0.4);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:    140ms;
  --dur-base:    220ms;
  --dur-slow:    420ms;
}

/* ---------- Element defaults ---------- */
html, body { background: var(--bg); color: var(--fg); font-family: var(--font-body); font-size: var(--fs-md); line-height: var(--lh-normal); -webkit-font-smoothing: antialiased; }

h1, .h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(40px, 6vw, var(--fs-6xl));
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
  color: var(--tyto-night);
  margin: 0 0 var(--space-4);
}
h2, .h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-4xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
  margin: 0 0 var(--space-3);
}
h3, .h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
  margin: 0 0 var(--space-2);
}
h4, .h4 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  margin: 0 0 var(--space-2);
}
p, .body { font-size: var(--fs-md); line-height: var(--lh-normal); color: var(--fg); }
.lede { font-size: var(--fs-lg); line-height: var(--lh-normal); color: var(--fg-muted); }
small, .small { font-size: var(--fs-sm); color: var(--fg-muted); }
.caption { font-size: var(--fs-xs); color: var(--fg-subtle); text-transform: uppercase; letter-spacing: var(--tracking-wider); font-weight: 600; }
.eyebrow { font-size: var(--fs-sm); font-weight: 600; color: var(--accent-press); text-transform: uppercase; letter-spacing: var(--tracking-wider); }
.numeric { font-family: var(--font-numeric); font-feature-settings: "tnum"; letter-spacing: var(--tracking-tight); }
code, .mono { font-family: var(--font-mono); font-size: 0.92em; }