/* ─────────────────────────────────────────────────────────────────────────────
   Ilya Gamburg — Personal Design System
   Foundations: color, type, spacing, radii, shadow, motion.
   ───────────────────────────────────────────────────────────────────────────── */

/* ── Type system — Google Noto family ─────────────────────────────────────
   Loads Noto Sans, Noto Serif, Noto Sans Mono — with Hebrew counterparts.
   Display headlines use Noto Serif at weight 700 (chosen for plump, even
   strokes that read clearly at any size — no fragile hairlines).
   Each family is loaded for Latin + Cyrillic + Hebrew so the system supports
   English, Russian, AND Hebrew. Google Fonts serves the right glyph file per
   script automatically via unicode-range — the browser picks correctly when
   you mix scripts in one paragraph. */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600&family=Noto+Sans+Hebrew:wght@400;500;600;700&family=Noto+Serif:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,600;1,700&family=Noto+Serif+Hebrew:wght@400;500;600;700;800&family=Noto+Sans+Mono:wght@400;500;600;700&display=swap');

:root {
  /* ── Color: Cream / butter neutrals ──────────────────────────────────────── */
  --cream-50:  #FDFAF1;   /* highlight cream — used inside black cards */
  --cream-100: #FBF5E6;   /* card surface */
  --cream-200: #F8F1E0;   /* page background */
  --cream-300: #F1E8CF;   /* hover state on cream pills */
  --cream-400: #E6DCBE;   /* dotted-grid lines, muted dividers */

  /* ── Color: Inky blacks ──────────────────────────────────────────────────── */
  --ink-900: #121212;     /* deepest — used for the wordmark */
  --ink-800: #1A1A1A;     /* dark card surface */
  --ink-700: #2A2A2A;     /* dark card hover */
  --ink-600: #3A3A37;     /* secondary text on cream */

  /* ── Color: Warm greys ───────────────────────────────────────────────────── */
  --warm-100: #EFEAD9;
  --warm-200: #DDD5BE;
  --warm-300: #C9C2B0;
  --warm-500: #9A958A;    /* secondary text on cream */
  --warm-700: #6E6A60;

  /* ── Color: Brand accent — sunny yellow ──────────────────────────────────── */
  --yellow-100: #FBEFC1;
  --yellow-200: #F9E599;
  --yellow-300: #F7DD7C;
  --yellow-400: #F6D260;
  --yellow-500: #F5C84A;  /* THE brand accent */
  --yellow-600: #E8B92E;
  --yellow-700: #C99A14;

  /* ── Color: Quiet semantic states ────────────────────────────────────────── */
  --success: #4F8A5F;
  --success-bg: #E5EFE3;
  --warning: #D89B2E;
  --warning-bg: #FBEFC1;
  --danger:  #B74B3D;
  --danger-bg:  #F4DDD7;
  --info:    #486E84;
  --info-bg:    #DCE8EE;

  /* ── Semantic surface tokens ─────────────────────────────────────────────── */
  --bg-page:        var(--cream-200);
  --bg-card:        var(--cream-100);
  --bg-card-dark:   var(--ink-800);
  --bg-elevated:    var(--cream-50);

  /* ── Semantic text tokens ────────────────────────────────────────────────── */
  --fg-1:           var(--ink-900);  /* primary text on cream */
  --fg-2:           var(--ink-600);  /* secondary text on cream */
  --fg-3:           var(--warm-500); /* tertiary / labels */
  --fg-on-dark-1:   var(--cream-50); /* primary text on ink */
  --fg-on-dark-2:   var(--warm-300); /* secondary text on ink */
  --fg-on-yellow:   var(--ink-900);  /* text on yellow chips/pills */

  /* ── Semantic accent tokens ──────────────────────────────────────────────── */
  --accent:         var(--yellow-500);
  --accent-strong:  var(--yellow-600);
  --line:           var(--cream-400); /* hairline dividers */
  --line-dotted:    var(--warm-300);  /* dotted timeline lines */

  /* ── Type families ───────────────────────────────────────────────────────
     Multi-script stacks. Browsers walk left→right and use the first family
     whose unicode-range matches the glyph being rendered. So you can write
         "Hello　Привет　שלום"
     in one element and get the right Noto file for each word automatically.
     Order: display family first, then Hebrew counterpart, then generic. */
  --font-sans:        'Noto Sans', 'Noto Sans Hebrew', system-ui, -apple-system, sans-serif;
  --font-serif:       'Noto Serif', 'Noto Serif Hebrew', Georgia, serif;
  --font-serif-body:  'Noto Serif', 'Noto Serif Hebrew', Georgia, serif;
  --font-mono:        'Noto Sans Mono', ui-monospace, 'SFMono-Regular', monospace;
  --font-emoji:       'Apple Color Emoji', 'Segoe UI Emoji', sans-serif;

  /* ── Type scale (px) ─────────────────────────────────────────────────────── */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-lg:   18px;
  --text-xl:   22px;
  --text-2xl:  28px;
  --text-3xl:  36px;
  --text-4xl:  48px;
  --text-5xl:  64px;
  --text-6xl:  88px;

  /* ── Line heights ────────────────────────────────────────────────────────── */
  --lh-tight:   1.1; /* @kind other */
  --lh-snug:    1.25; /* @kind other */
  --lh-normal:  1.55; /* @kind other */
  --lh-relaxed: 1.7; /* @kind other */

  /* ── Spacing — 4px base ──────────────────────────────────────────────────── */
  --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;

  /* ── Corner radii ────────────────────────────────────────────────────────── */
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-xl:   28px;
  --radius-pill: 999px;

  /* ── Shadows ─────────────────────────────────────────────────────────────── */
  --shadow-soft:  0 1px 2px rgba(40,30,10,0.04), 0 8px 24px rgba(40,30,10,0.06);
  --shadow-card:  0 2px 4px rgba(40,30,10,0.06), 0 16px 40px rgba(40,30,10,0.10);
  --shadow-pop:   0 4px 8px rgba(40,30,10,0.08), 0 24px 56px rgba(40,30,10,0.16);
  --shadow-dark:  0 2px 4px rgba(0,0,0,0.20), 0 16px 40px rgba(0,0,0,0.35);

  /* ── Motion ──────────────────────────────────────────────────────────────── */
  /* Soft overshoot — gentle bounce, never springy. */
  --ease-out:      cubic-bezier(0.22, 1.2, 0.36, 1); /* @kind other */   /* gentle-out, default */
  --ease-soft:     cubic-bezier(0.34, 1.45, 0.5, 1); /* @kind other */   /* soft-bounce, for entries */
  --ease-press:    cubic-bezier(0.34, 1.7, 0.64, 1); /* @kind other */   /* press-pop release */
  --ease-in-out:   cubic-bezier(0.65, 0.05, 0.36, 1); /* @kind other */
  --dur-fast:      180ms; /* @kind other */
  --dur-base:      260ms; /* @kind other */
  --dur-slow:      320ms; /* @kind other */
}

/* ─────────────────────────────────────────────────────────────────────────────
   Semantic element styles — drop-in defaults
   ───────────────────────────────────────────────────────────────────────────── */

html, body {
  background: var(--bg-page);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1 {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: var(--text-6xl);
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  margin: 0;
}

h2, .h2 {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: var(--text-4xl);
  line-height: var(--lh-tight);
  letter-spacing: -0.015em;
  margin: 0;
}

h3, .h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-2xl);
  line-height: var(--lh-snug);
  letter-spacing: -0.01em;
  margin: 0;
}

h4, .h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-xl);
  line-height: var(--lh-snug);
  margin: 0;
}

h5, .h5 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-lg);
  line-height: var(--lh-snug);
  margin: 0;
}

p, .body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--lh-normal);
  color: var(--fg-1);
  margin: 0;
}

.eyebrow,
.label {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--fg-3);
  text-transform: none; /* sentence case — never uppercase */
}

.metric {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-5xl);
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

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

a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-base) var(--ease-out);
}
a:hover { border-bottom-color: currentColor; }

/* ── Reusable surface helpers ───────────────────────────────────────────── */
.surface-card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  padding: var(--space-6);
}
.surface-card-dark {
  background: var(--bg-card-dark);
  color: var(--fg-on-dark-1);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-dark);
  padding: var(--space-6);
}
.surface-frame {
  background: linear-gradient(180deg, var(--cream-200) 0%, var(--yellow-100) 100%);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
}

/* ── Pill / button base ─────────────────────────────────────────────────── */
.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 10px var(--space-4);
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 500;
  background: var(--cream-100);
  color: var(--fg-1);
  border: none;
  cursor: pointer;
  transition: background var(--dur-base) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.pill:hover     { background: var(--cream-300); }
.pill:active    { transform: scale(0.98); }
.pill[data-active="true"] {
  background: var(--ink-800);
  color: var(--fg-on-dark-1);
}
.pill--accent {
  background: var(--yellow-500);
  color: var(--fg-on-yellow);
}
.pill--accent:hover { background: var(--yellow-600); }

/* ─────────────────────────────────────────────────────────────────────────────
   RTL (Hebrew / Arabic) support
   Setting `dir="rtl"` on an element automatically mirrors layout. These rules
   tighten Noto Serif Hebrew's vertical metrics so it sits flush with the Latin
   set and reverses the leading-zero numerals.
   ───────────────────────────────────────────────────────────────────────────── */

[dir="rtl"] {
  text-align: right;
}
[dir="rtl"] .label, [dir="rtl"] .eyebrow {
  letter-spacing: 0;
}
/* Hebrew serif sits slightly low at large sizes — nudge it up. */
:lang(he) h1, :lang(he) .h1,
:lang(he) h2, :lang(he) .h2,
[dir="rtl"] h1, [dir="rtl"] h2 {
  line-height: 1.2;
  letter-spacing: 0;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Data / infographic palette
   A curated 6-step categorical scale tuned to the cream + yellow + ink system.
   Use these for charts, badges, tag colors, knowledge-map nodes, etc.
   ───────────────────────────────────────────────────────────────────────────── */

:root {
  --data-1: var(--yellow-500);   /* primary series — sunny yellow */
  --data-2: #2A6F8C;             /* ocean — calm blue */
  --data-3: #C46A4D;             /* terracotta — warm rust */
  --data-4: #6B8A5E;             /* sage — muted green */
  --data-5: #8B5E9B;             /* plum — soft purple */
  --data-6: var(--ink-800);      /* ink — for "all" / total / contrast */

  /* Sequential ramp (for heatmaps / progress / density) */
  --seq-0: var(--cream-100);
  --seq-1: var(--yellow-200);
  --seq-2: var(--yellow-400);
  --seq-3: var(--yellow-600);
  --seq-4: var(--ink-700);
  --seq-5: var(--ink-900);

  /* Surfaces for documents / catalogs / decks */
  --page-margin:    48px;        /* gutter on print pages */
  --page-margin-sm: 24px;
  --rule-thin:      1px solid var(--line);
  --rule-thick:     2px solid var(--ink-900);

  /* Slide & document type scale — bigger than UI */
  --slide-h1:    96px;
  --slide-h2:    64px;
  --slide-h3:    40px;
  --slide-body:  28px;
  --slide-cap:   18px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Print / PDF — used for catalogs, course handouts, one-pagers
   Tested on Chrome's "Save as PDF" at A4. To trigger a page break: <div class="page-break"></div>.
   ───────────────────────────────────────────────────────────────────────────── */

@page {
  size: A4;
  margin: 18mm 16mm;
}

@media print {
  html, body {
    background: white;
    color: var(--ink-900);
    font-size: 10.5pt;
    line-height: 1.45;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  /* Card shadows look bad on paper — flatten to a hairline. */
  .surface-card, .surface-card-dark, .surface-frame, .card {
    box-shadow: none !important;
    border: 1px solid var(--line);
    page-break-inside: avoid;
    break-inside: avoid;
  }
  .surface-card-dark, .card.dark {
    background: var(--ink-900) !important;
    color: white !important;
  }
  h1, h2, h3 { page-break-after: avoid; }
  .page-break { page-break-before: always; break-before: page; }
  /* Hide nav, sticky chrome, hover decorations on print. */
  .no-print, nav, .ig-top, .ig-nav-wrap { display: none !important; }
}