/* ============================================================
   HOW AI — Design System Foundations
   Colors, type, spacing tokens.
   Import this file into any HOW AI artifact.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Inter+Tight:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ---------- Core ---------- */
  --ink:        #0A0A0B;  /* Primary text, primary surface (dark mode) */
  --ink-2:      #16161A;  /* Elevated dark surface */
  --paper:      #F4F1EC;  /* Primary canvas — warm off-white */
  --paper-2:    #ECE7DF;  /* Tinted card background */
  --paper-3:    #E2DCD0;  /* Deeper warm tint */

  /* ---------- Warm graphite neutrals ---------- */
  --graphite-900: #1F1F23;
  --graphite-700: #3A3A40;
  --graphite-500: #6B6B73;
  --graphite-300: #A8A6A0;
  --graphite-100: #D9D5CC;

  /* ---------- Signature accent — Signal Blue ---------- */
  --signal:      #1B4DFF;
  --signal-deep: #0F2EAA;
  --signal-tint: #C9D5FF;

  /* ---------- Functional ---------- */
  --success: #1F8A4C;
  --warn:    #C77A0F;
  --info:    #0F6FB5;
  --error:   #C73C3C;

  /* ---------- Semantic foreground ---------- */
  --fg-1: var(--ink);
  --fg-2: var(--graphite-700);
  --fg-3: var(--graphite-500);
  --fg-inverse: var(--paper);
  --fg-accent: var(--signal);

  /* ---------- Semantic background ---------- */
  --bg-1: var(--paper);
  --bg-2: var(--paper-2);
  --bg-3: var(--paper-3);
  --bg-inverse: var(--ink);
  --border: var(--graphite-100);
  --border-strong: var(--graphite-300);

  /* ---------- Type families ---------- */
  --font-display: 'Inter Tight', 'Söhne', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-body:    'Inter', 'Söhne', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-mono:    'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;

  /* ---------- Type scale (1.25 ratio, snap whole px) ---------- */
  --fs-12: 12px;
  --fs-14: 14px;
  --fs-16: 16px;
  --fs-18: 18px;  /* base body */
  --fs-22: 22px;
  --fs-28: 28px;
  --fs-36: 36px;
  --fs-48: 48px;
  --fs-64: 64px;
  --fs-80: 80px;
  --fs-104: 104px;
  --fs-168: 168px;

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

  /* ---------- Radii (sparse, mostly squared) ---------- */
  --r-0: 0;
  --r-1: 2px;
  --r-2: 4px;

  /* ---------- Borders ---------- */
  --bw-1: 1px;
  --bw-2: 2px;

  /* ---------- Motion ---------- */
  --ease-default: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in:      cubic-bezier(0.7, 0, 1, 0.4);
  --ease-out:     cubic-bezier(0, 0.4, 0.3, 1);
  --dur-1: 120ms;
  --dur-2: 240ms;
  --dur-3: 480ms;
  --dur-4: 720ms;
}

/* ============================================================
   Semantic typography classes
   ============================================================ */

.type-display {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 0.95;
  font-size: var(--fs-168);
}
.type-h1 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.028em;
  line-height: 0.98;
  font-size: var(--fs-104);
}
.type-h2 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.02;
  font-size: var(--fs-64);
}
.type-h3 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.1;
  font-size: var(--fs-36);
}
.type-h4 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
  font-size: var(--fs-28);
}
.type-body-l {
  font-family: var(--font-body);
  font-size: var(--fs-22);
  line-height: 1.45;
}
.type-body {
  font-family: var(--font-body);
  font-size: var(--fs-18);
  line-height: 1.55;
}
.type-body-s {
  font-family: var(--font-body);
  font-size: var(--fs-14);
  line-height: 1.5;
}
.type-caption {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  letter-spacing: 0.04em;
  color: var(--fg-3);
}
.type-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-accent);
}
.type-mono {
  font-family: var(--font-mono);
  font-size: var(--fs-14);
}

/* ============================================================
   The HOW AI Wordmark — locked
   ============================================================ */
.wordmark {
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: -0.015em;
  line-height: 0.9;
  color: var(--ink);
}
.wordmark .ai {
  font-weight: 300;
  letter-spacing: 0;
  margin-left: 0.16em;
}
.wordmark.inverse { color: var(--paper); }

/* ============================================================
   The HOW AI Bracket — signature framing device
   ============================================================ */
.bracket {
  position: absolute;
  inset: 56px;
  border: var(--bw-1) solid var(--signal);
  pointer-events: none;
}
.bracket > i {
  content: '';
  position: absolute;
  width: 8px;
  height: 8px;
  background: var(--signal);
}
.bracket > i.tl { top: -4px; left: -4px; }
.bracket > i.tr { top: -4px; right: -4px; }
.bracket > i.bl { bottom: -4px; left: -4px; }
.bracket > i.br { bottom: -4px; right: -4px; }
.bracket.inverse { border-color: var(--paper); }
.bracket.inverse > i { background: var(--paper); }