/* ============================================================
   INSIDE THE ROOM — Design Foundations
   Colors + Type tokens. Import this file anywhere in the system.
   "Clarity in Complexity" — structured, thoughtful, practical, calm.
   ============================================================ */

/* Inter is the single system typeface (brand rule: avoid many fonts). */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* ---------- BRAND PALETTE (raw) ---------- */
  --sage-green:  #A7B8A8;  /* Primary  — calm, organic accent */
  --slate-blue:  #1F2D3D;  /* Primary  — authority, logo ground */
  --off-white:   #F6F7F2;  /* Primary  — page canvas */
  --charcoal:    #2B2F33;  /* Neutral  — primary text */
  --light-grey:  #E6E8EB;  /* Neutral  — borders, dividers, fills */
  --muted-green: #6F8F7A;  /* Accent   — links, emphasis, CTAs */

  /* Tints / shades derived in-palette (oklch-harmonized, no new hues) */
  --slate-blue-90: #2B3B4D;
  --slate-blue-70: #4A5868;
  --muted-green-dark: #5C7866;   /* hover / pressed for accent */
  --sage-tint:   #DCE3DC;        /* soft sage fill */
  --sage-faint:  #EDF1ED;        /* faintest sage wash */
  --off-white-2: #EEF0EA;        /* alt canvas band */

  /* Slate-blue accent family — the second brand accent, made usable on light.
     Calm and muted (no bright/clashing), harmonized with the slate-blue ground. */
  --slate-accent:       #3D5B7A; /* Accent — slate-blue emphasis, links on light */
  --slate-accent-hover: #324C66; /* hover / pressed */
  --slate-tint:  #D6DFE8;        /* soft slate-blue fill */
  --slate-faint: #E9EEF3;        /* faintest slate-blue wash */

  /* ---------- SEMANTIC COLOR ---------- */
  --bg:           var(--off-white);    /* page background */
  --bg-alt:       var(--off-white-2);  /* alternate section band */
  --surface:      #FFFFFF;             /* cards, sheets */
  --surface-sunk: var(--sage-faint);   /* inset / sunken fill */

  --fg-1:         var(--charcoal);     /* primary text */
  --fg-2:         #5A626B;             /* secondary text */
  --fg-3:         #8B929A;             /* tertiary / captions */
  --fg-on-dark:   var(--off-white);    /* text on slate */
  --fg-on-dark-2: #A9B4C0;             /* muted text on slate */

  --accent:       var(--muted-green);  /* links, primary action */
  --accent-hover: var(--muted-green-dark);
  --accent-quiet: var(--sage-green);   /* low-emphasis accent */

  --accent-2:       var(--slate-accent);       /* secondary accent — slate-blue emphasis */
  --accent-2-hover: var(--slate-accent-hover);

  --border:       var(--light-grey);   /* default hairline */
  --border-strong:#D2D6DB;             /* heavier divider */
  --border-on-dark: rgba(246,247,242,.16);

  --focus-ring:   rgba(111,143,122,.45);

  /* ---------- TYPE FAMILY ---------- */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, monospace;

  /* ---------- TYPE SCALE (from brand guidelines) ---------- */
  --t-h1:    52px;  --t-h1-lh:  1.08;  --t-h1-w:  600;  /* LinkedIn banner / hero */
  --t-h2:    28px;  --t-h2-lh:  1.18;  --t-h2-w:  600;
  --t-h3:    20px;  --t-h3-lh:  1.3;   --t-h3-w:  500;
  --t-body:  16px;  --t-body-lh:1.6;   --t-body-w:400;
  --t-small: 13px;  --t-small-lh:1.5;  --t-small-w:400;  /* caption 12–14 */
  --t-eyebrow: 12px;
  --tracking-tight: -0.02em;   /* headings */
  --tracking-eyebrow: 0.14em;  /* uppercase labels */

  /* ---------- RADII ---------- */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-pill: 999px;

  /* ---------- ELEVATION (restrained — brand rule: avoid heavy shadows) ---------- */
  --shadow-1: 0 1px 2px rgba(31,45,61,.06);
  --shadow-2: 0 2px 8px rgba(31,45,61,.08);
  --shadow-3: 0 10px 30px rgba(31,45,61,.10);

  /* ---------- SPACING (4px base) ---------- */
  --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;

  /* ---------- MOTION (calm: short, eased, no bounce) ---------- */
  --ease: cubic-bezier(.4, 0, .2, 1);
  --dur-fast: 120ms;
  --dur:      180ms;
  --dur-slow: 280ms;
}

/* ============================================================
   SEMANTIC TYPE CLASSES
   ============================================================ */
.it-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--t-eyebrow);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
}
.it-h1 {
  font-family: var(--font-sans);
  font-size: var(--t-h1);
  line-height: var(--t-h1-lh);
  font-weight: var(--t-h1-w);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  text-wrap: balance;
}
.it-h2 {
  font-family: var(--font-sans);
  font-size: var(--t-h2);
  line-height: var(--t-h2-lh);
  font-weight: var(--t-h2-w);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  text-wrap: balance;
}
.it-h3 {
  font-family: var(--font-sans);
  font-size: var(--t-h3);
  line-height: var(--t-h3-lh);
  font-weight: var(--t-h3-w);
  color: var(--fg-1);
}
.it-body {
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: var(--t-body-lh);
  font-weight: var(--t-body-w);
  color: var(--fg-2);
  text-wrap: pretty;
}
.it-small {
  font-family: var(--font-sans);
  font-size: var(--t-small);
  line-height: var(--t-small-lh);
  color: var(--fg-3);
}