/* ============================================================
   SAIGA — Colors & Type foundation
   "AI that keeps company knowledge current and findable."
   ------------------------------------------------------------
   Aesthetic: warm, human, editorial. Slack warmth + Airtable
   structure + a consumer-brand layer. Earthy "antelope" palette:
   warm sand + deep ink + a single bold terracotta ember accent,
   with deep pine as the natural secondary.

   Fonts are loaded from Google Fonts (see @import below). These
   are the chosen brand fonts, not substitutions — but no local
   .ttf files are bundled. Swap to self-hosted files if you need
   offline / privacy-safe rendering.
   ============================================================ */

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

:root {
  /* ---------- TYPE FAMILIES ---------- */
  --font-display: "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* display = bold grotesque. No serif titles. */
  --font-sans: "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---------- NEUTRALS (warm sand → deep ink) ---------- */
  --white:    #FFFFFF;
  --paper:    #FBF7EF;  /* elevated card / panel surface */
  --sand:     #F4ECDD;  /* default page background */
  --sand-2:   #EBE0CD;  /* deeper section band */
  --sand-3:   #E0D2BB;  /* subtle fills, chips */
  --line:     #E2D7C4;  /* hairline border on sand */
  --line-2:   #D2C4AC;  /* stronger divider */

  --ink:      #1C1814;  /* primary text, warm near-black */
  --ink-2:    #4B4339;  /* secondary text */
  --ink-3:    #847A6B;  /* muted / tertiary text */
  --ink-4:    #A99E8C;  /* placeholder, disabled */

  /* ---------- BRAND ---------- */
  --ember:        #D85A34;  /* PRIMARY accent — terracotta / clay */
  --ember-deep:   #B6431E;  /* hover / press */
  --ember-press:  #9C381A;  /* active */
  --ember-tint:   #F7DECF;  /* soft background wash */
  --ember-tint-2: #FBEDE3;  /* faintest wash */

  --pine:        #2E4B3B;  /* SECONDARY natural — deep forest */
  --pine-deep:   #213729;
  --pine-tint:   #D9E3D7;
  --pine-tint-2: #EBF0E8;

  --saffron:     #E7A23B;  /* tertiary warm highlight (sparingly) */
  --saffron-tint:#F8E6C4;

  /* ---------- SEMANTIC STATUS ---------- */
  --success:      #2E7D52;
  --success-tint: #DCEBE0;
  --warning:      #C8821B;
  --warning-tint: #F7E7C6;
  --danger:       #C0432B;
  --danger-tint:  #F6DDD4;
  --info:         #2E4B3B;   /* reuse pine for "info" / sources */

  /* ---------- SEMANTIC ROLES ---------- */
  --bg:            var(--sand);
  --bg-elevated:   var(--paper);
  --fg:            var(--ink);
  --fg-muted:      var(--ink-2);
  --fg-subtle:     var(--ink-3);
  --border:        var(--line);
  --accent:        var(--ember);
  --accent-fg:     #FFFFFF;
  --focus-ring:    color-mix(in oklch, var(--ember) 45%, transparent);

  /* ---------- RADII ---------- */
  --r-xs: 6px;
  --r-sm: 9px;
  --r-md: 13px;    /* default control / chip radius */
  --r-lg: 18px;    /* cards */
  --r-xl: 26px;    /* hero panels, big surfaces */
  --r-pill: 999px;

  /* ---------- SPACING (4px base) ---------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;

  /* ---------- SHADOWS (warm, soft — Slack DNA) ---------- */
  --shadow-xs: 0 1px 2px rgba(43, 31, 18, 0.06);
  --shadow-sm: 0 2px 6px rgba(43, 31, 18, 0.07);
  --shadow-md: 0 6px 18px rgba(43, 31, 18, 0.09), 0 2px 6px rgba(43, 31, 18, 0.05);
  --shadow-lg: 0 16px 40px rgba(43, 31, 18, 0.12), 0 4px 12px rgba(43, 31, 18, 0.06);
  --shadow-xl: 0 30px 70px rgba(43, 31, 18, 0.16);
  --shadow-ember: 0 8px 24px rgba(184, 67, 30, 0.28);

  /* ---------- MOTION ---------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */     /* default reveal / hover */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */ /* gentle overshoot */
  --dur-fast: 130ms; /* @kind other */
  --dur: 220ms; /* @kind other */
  --dur-slow: 480ms; /* @kind other */
}

/* ============================================================
   BASE / SEMANTIC TYPE ELEMENTS
   Type scale is editorial: tight, large display headings in the
   serif; calm grotesque body. Headlines use the serif; everything
   functional (UI, labels, body) uses the grotesque.
   ============================================================ */

.saiga, body.saiga {
  font-family: var(--font-sans);
  color: var(--fg);
  background: var(--bg);
  font-size: 16px;
  line-height: 1.55;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv01";
}

/* Display — bold, tight grotesque. No serifs, no italics, no eyebrows. */
.display-1 {
  font-family: var(--font-display);
  font-weight: 750;
  font-size: clamp(44px, 6.2vw, 88px);
  line-height: 1.04;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.display-2 {
  font-family: var(--font-display);
  font-weight: 750;
  font-size: clamp(36px, 4.6vw, 60px);
  line-height: 1.07;
  letter-spacing: -0.028em;
  color: var(--ink);
}

h1, .h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(32px, 3.6vw, 46px);
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--ink);
}
h2, .h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(26px, 2.6vw, 34px);
  line-height: 1.14;
  letter-spacing: -0.02em;
  color: var(--ink);
}
h3, .h3 {
  font-family: var(--font-sans);
  font-weight: 650;
  font-size: 21px;
  line-height: 1.25;
  letter-spacing: -0.005em;
  color: var(--ink);
}
h4, .h4 {
  font-family: var(--font-sans);
  font-weight: 650;
  font-size: 17px;
  line-height: 1.3;
  color: var(--ink);
}

/* DEPRECATED — eyebrows/kickers are removed from layouts. No all-caps labels.
   Kept only so legacy markup degrades to a quiet sentence-case label. */
.eyebrow {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-3);
}

.lead {
  font-size: clamp(18px, 1.6vw, 21px);
  line-height: 1.5;
  color: var(--ink-2);
  font-weight: 400;
}
p, .body {
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-2);
}
.body-sm { font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.caption { font-size: 12.5px; line-height: 1.4; color: var(--ink-3); }

code, .code, pre {
  font-family: var(--font-mono);
  font-size: 13.5px;
  font-feature-settings: "zero";
}

a { color: var(--ember-deep); text-decoration-thickness: 1.5px; text-underline-offset: 2px; }

/* No italics in titles — emphasis in headlines is done with color, never italics. */
em { font-style: italic; }