/* ============================================================
   BogdAI — Color & Type Tokens
   Editorial, anthropic-inspired aesthetic.
   ============================================================ */

/* Web fonts: Source Serif 4 (display) + Geist (body/UI) ------- */
@import url("https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,300;8..60,400;8..60,500;8..60,600;8..60,700&family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500&display=swap");

:root {
  /* ---------- COLOR ---------- */
  /* Core palette */
  --cream:        #faf9f5;  /* soft warm off-white */
  --cream-2:      #f4f2ea;  /* slightly deeper cream, hover surface */
  --bone:         #e8e6dc;  /* gray-cream, dividers + subtle bg */
  --bone-2:       #d9d6c8;  /* deeper bone, borders */
  --ink:          #141413;  /* near-black, primary text */
  --ink-2:        #2a2a27;  /* slightly softer ink, secondary heads */
  --slate:        #54534d;  /* secondary text */
  --slate-2:      #87857c;  /* tertiary / placeholder */

  /* Brand accent */
  --brick:        #d97757;  /* secondary accent — kept for tonal moments */
  --brick-deep:   #c25f3f;
  --brick-soft:   #ecb8a3;
  --brick-wash:   #faece4;

  /* Primary action color — brand blue (from logo) */
  --blue:         #2a6df3;
  --blue-deep:    #1f55c7;
  --blue-soft:    #b8cdfa;
  --blue-wash:    #eaf1fe;
  --blue-ink:     #0c1f4a;

  /* Status (kept in-palette, muted) */
  --green:        #5d7c4f;
  --amber:        #b5832b;
  --red:          #b1452b;

  /* ---------- SEMANTIC ---------- */
  --bg:           var(--cream);
  --bg-elev:      #ffffff;
  --bg-subtle:    var(--bone);
  --bg-wash:      var(--cream-2);

  --fg:           var(--ink);
  --fg-1:         var(--ink);     /* primary */
  --fg-2:         var(--slate);   /* secondary */
  --fg-3:         var(--slate-2); /* tertiary */
  --fg-on-brick:  var(--cream);
  --fg-on-ink:    var(--cream);

  --border:       var(--bone-2);
  --border-strong:var(--ink);
  --divider:      var(--bone);

  --accent:       var(--blue);
  --accent-hover: var(--blue-deep);
  --accent-fg:    var(--cream);
  --focus-ring:   var(--blue-soft);

  /* ---------- RADIUS ---------- */
  --r-0: 0px;
  --r-1: 2px;
  --r-2: 4px;
  --r-3: 8px;
  --r-4: 12px;
  --r-pill: 999px;

  /* ---------- SHADOW ---------- */
  --shadow-0: none;
  --shadow-1: 0 1px 0 rgba(20,20,19,0.04);
  --shadow-2: 0 2px 8px rgba(20,20,19,0.05), 0 1px 2px rgba(20,20,19,0.04);
  --shadow-3: 0 8px 32px rgba(20,20,19,0.08), 0 2px 6px rgba(20,20,19,0.04);
  --shadow-focus: 0 0 0 3px var(--brick-soft);

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

  /* ---------- LAYOUT ---------- */
  --container-max: 1240px;
  --container-pad: clamp(20px, 4vw, 56px);
  --rule: 1px solid var(--border);

  /* ---------- MOTION ---------- */
  --ease-out:  cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in:   cubic-bezier(0.6, 0.0, 0.8, 0.3);
  --ease-std:  cubic-bezier(0.4, 0.0, 0.2, 1);
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;

  /* ---------- TYPE FAMILIES ---------- */
  --font-serif:  "Source Serif 4", "Lora", Georgia, "Times New Roman", serif;
  --font-sans:   "Geist", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --font-mono:   "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ---------- TYPE SCALE (fluid) ---------- */
  --t-display:  clamp(56px, 7.5vw, 104px);  /* hero */
  --t-h1:       clamp(40px, 5vw, 72px);
  --t-h2:       clamp(32px, 3.6vw, 52px);
  --t-h3:       clamp(24px, 2.4vw, 34px);
  --t-h4:       20px;
  --t-eyebrow:  13px;
  --t-body-lg:  19px;
  --t-body:     16px;
  --t-small:    14px;
  --t-micro:    12px;

  /* Line heights */
  --lh-tight: 1.05;
  --lh-snug:  1.18;
  --lh-body:  1.55;
  --lh-loose: 1.7;

  /* Tracking */
  --tr-tight:  -0.02em;
  --tr-snug:   -0.01em;
  --tr-normal: 0;
  --tr-wide:    0.06em;
  --tr-eye:     0.14em;  /* eyebrows / labels uppercase */
}

/* ============================================================
   ELEMENT DEFAULTS (use inside .ds scope or globally on docs)
   ============================================================ */
html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1, h2, .h2, h3, .h3, h4, .h4 {
  font-family: var(--font-serif);
  color: var(--fg-1);
  font-weight: 400;          /* serif at display sizes — light weight feels editorial */
  letter-spacing: var(--tr-tight);
  line-height: var(--lh-tight);
  text-wrap: balance;
}
h1, .h1 { font-size: var(--t-h1); }
h2, .h2 { font-size: var(--t-h2); }
h3, .h3 { font-size: var(--t-h3); line-height: var(--lh-snug); letter-spacing: var(--tr-snug); }
h4, .h4 { font-size: var(--t-h4); line-height: var(--lh-snug); letter-spacing: var(--tr-snug); font-weight: 500; }

.display {
  font-family: var(--font-serif);
  font-size: var(--t-display);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -0.025em;
  color: var(--fg-1);
  text-wrap: balance;
}

.eyebrow, .label-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--t-eyebrow);
  font-weight: 500;
  letter-spacing: var(--tr-eye);
  text-transform: uppercase;
  color: var(--fg-2);
}

p, .p { font-size: var(--t-body); line-height: var(--lh-body); color: var(--fg-1); text-wrap: pretty; }
.lead { font-size: var(--t-body-lg); line-height: 1.5; color: var(--fg-1); }
.small { font-size: var(--t-small); color: var(--fg-2); }
.micro { font-size: var(--t-micro); color: var(--fg-2); letter-spacing: 0.01em; }

code, kbd, samp, pre, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

hr { border: 0; border-top: var(--rule); margin: var(--sp-6) 0; }

a {
  color: var(--fg-1);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--bone-2);
  transition: text-decoration-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out);
}
a:hover { text-decoration-color: var(--accent); color: var(--accent); }

::selection { background: var(--ink); color: var(--cream); }

*:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: var(--r-2);
}