/* ==========================================================================
   Jakib Design System — Colors & Type
   April Refresh
   ========================================================================== */

/* JetBrains Mono (Bold + regular weights) — official wordmark face */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap');

/* Inter — supporting UI/body face (substitution flagged in README) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* Newsreader — long-form/editorial serif (substitution flagged in README) */
@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,wght@0,400;0,500;1,400&display=swap');

:root {
  /* ----- Brand core (constants) ------------------------------------------ */
  --acid:        #C8F24C;          /* Bracket color. Sacred. Never recolored. */
  --acid-rgb:    200, 242, 76;
  --ink:         #0A0A0B;          /* Wordmark on light. Near-black, warm-cool neutral. */
  --ink-rgb:     10, 10, 11;
  --paper:       #F4F1EA;          /* Off-white ivory. Wordmark on dark. */
  --paper-rgb:   244, 241, 234;
  --white:       #FFFFFF;          /* Pure web white, secondary surface. */

  /* ----- Acid scale (use sparingly — accent only) ------------------------ */
  --acid-50:     #F7FCE3;
  --acid-100:    #ECFAB8;
  --acid-200:    #DEF78A;
  --acid-300:    #D0F45F;
  --acid-400:    #C8F24C;          /* = --acid (canonical) */
  --acid-500:    #B3DC30;
  --acid-600:    #94B824;
  --acid-700:    #6E8A1A;

  /* ----- Ink scale (neutrals, warm-leaning) ------------------------------ */
  --ink-900:     #0A0A0B;          /* = --ink */
  --ink-800:     #1A1A1C;
  --ink-700:     #2A2A2D;
  --ink-600:     #44444A;
  --ink-500:     #6B6B72;
  --ink-400:     #97979D;
  --ink-300:     #C2C2C6;
  --ink-200:     #E0E0E2;
  --ink-100:     #EDEDEF;

  /* ----- Paper scale (warm off-whites) ----------------------------------- */
  --paper-900:   #E8E2D2;
  --paper-700:   #EDE8DA;
  --paper-500:   #F0EBDD;
  --paper-300:   #F4F1EA;          /* = --paper */
  --paper-100:   #F9F7F1;
  --paper-50:    #FCFBF7;

  /* ----- Semantic tokens (light/paper mode) ------------------------------ */
  --bg:          var(--paper);
  --bg-alt:      var(--paper-100);
  --bg-sunken:   var(--paper-500);
  --surface:     var(--white);
  --fg:          var(--ink);
  --fg-1:        var(--ink-900);   /* Primary text */
  --fg-2:        var(--ink-700);   /* Secondary text */
  --fg-3:        var(--ink-500);   /* Tertiary / metadata */
  --fg-4:        var(--ink-400);   /* Disabled / placeholder */
  --border:      var(--ink-200);
  --border-strong: var(--ink-300);
  --rule:        rgba(var(--ink-rgb), 0.08);
  /* THE ACID RULE -------------------------------------------------------
     --accent is reserved for SMALL accent moments only:
       - the bracket glyphs in the wordmark
       - focus rings
       - link underlines (2pt)
       - 1–2pt highlights / dividers / chart series
       - tiny pips inside buttons (≤7px)
     DO NOT use --accent as a button fill, hero background, large surface,
     section divider stripe, or any element wider than ~32px. The acid
     belongs INSIDE the brackets, not in place of them.
     There is intentionally NO --accent-surface token. This is a feature.
     -------------------------------------------------------------------- */
  --accent:      var(--acid);
  --accent-fg:   var(--ink);       /* Text ON acid is always ink. (Used inside brackets / focus ring only.) */
  --selection:   var(--acid-200);
  --link:        var(--ink-900);
  --link-underline: var(--acid);

  /* ----- Status (used minimally) ----------------------------------------- */
  --ok:          #2F7A3D;
  --warn:        #B8860B;
  --err:         #B12A2A;

  /* ----- Type families --------------------------------------------------- */
  --font-mono:   "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --font-sans:   "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-serif:  "Newsreader", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-display: var(--font-mono);   /* Display = mono, always. */

  /* ----- Type scale (modular, 1.25 minor third) -------------------------- */
  --fs-xs:       12px;
  --fs-sm:       14px;
  --fs-base:     16px;
  --fs-md:       18px;
  --fs-lg:       22px;
  --fs-xl:       28px;
  --fs-2xl:      36px;
  --fs-3xl:      48px;
  --fs-4xl:      64px;
  --fs-5xl:      88px;
  --fs-6xl:      120px;

  /* ----- Line height ----------------------------------------------------- */
  --lh-tight:    1.05;
  --lh-snug:     1.2;
  --lh-normal:   1.45;
  --lh-loose:    1.65;

  /* ----- Letter spacing -------------------------------------------------- */
  --tracking-mono-tight: -0.02em;  /* The wordmark spec. */
  --tracking-tight:      -0.01em;
  --tracking-normal:     0;
  --tracking-wide:       0.04em;
  --tracking-caps:       0.08em;   /* For small-caps / eyebrow labels. */

  /* ----- Spacing (4px base) ---------------------------------------------- */
  --s-0:  0;
  --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;

  /* ----- Radii (restrained) --------------------------------------------- */
  --r-0:  0;
  --r-1:  2px;
  --r-2:  4px;
  --r-3:  6px;     /* Default for cards/inputs. */
  --r-4:  10px;
  --r-pill: 999px;

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

  /* ----- Shadows (used sparingly — system favors borders + flat) -------- */
  --shadow-1: 0 1px 2px rgba(var(--ink-rgb), 0.06);
  --shadow-2: 0 4px 12px rgba(var(--ink-rgb), 0.08);
  --shadow-3: 0 12px 32px rgba(var(--ink-rgb), 0.12);
  --shadow-acid: 0 0 0 3px rgba(var(--acid-rgb), 0.45);  /* Focus ring. */

  /* ----- Motion ---------------------------------------------------------- */
  --ease-out:    cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:    120ms;
  --dur-base:    200ms;
  --dur-slow:    320ms;

  /* ----- Layout ---------------------------------------------------------- */
  --container:   1200px;
  --gutter:      var(--s-5);
}

/* Dark / ink mode -------------------------------------------------------- */
[data-theme="ink"], .theme-ink {
  --bg:          var(--ink);
  --bg-alt:      var(--ink-800);
  --bg-sunken:   #050506;
  --surface:     var(--ink-800);
  --fg-1:        var(--paper);
  --fg-2:        rgba(var(--paper-rgb), 0.78);
  --fg-3:        rgba(var(--paper-rgb), 0.56);
  --fg-4:        rgba(var(--paper-rgb), 0.36);
  --border:      rgba(var(--paper-rgb), 0.12);
  --border-strong: rgba(var(--paper-rgb), 0.24);
  --rule:        rgba(var(--paper-rgb), 0.08);
  --link:        var(--paper);
  --selection:   var(--acid-700);
}

/* ==========================================================================
   Semantic element styles
   ========================================================================== */

html { font-size: 16px; }

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

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

/* --- Display & headings --------------------------------------------------
   Display uses MONO. Headings stay sans for readability except .display.
   This is the rhythmic core of the system: mono accents + clean sans body. */

.display, .display-1, .display-2 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: var(--tracking-mono-tight);
  line-height: var(--lh-tight);
  color: var(--fg-1);
}
.display-1 { font-size: clamp(48px, 9vw, 120px); }
.display-2 { font-size: clamp(36px, 6vw, 72px); }

h1 {
  font-family: var(--font-sans);
  font-size: var(--fs-3xl);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-tight);
  margin: 0 0 var(--s-5);
}
h2 {
  font-size: var(--fs-2xl);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-snug);
  margin: var(--s-7) 0 var(--s-4);
}
h3 {
  font-size: var(--fs-xl);
  font-weight: 600;
  line-height: var(--lh-snug);
  margin: var(--s-6) 0 var(--s-3);
}
h4 {
  font-size: var(--fs-lg);
  font-weight: 600;
  line-height: var(--lh-snug);
  margin: var(--s-5) 0 var(--s-3);
}
h5, h6 { font-size: var(--fs-md); font-weight: 600; margin: var(--s-4) 0 var(--s-2); }

p { margin: 0 0 var(--s-4); max-width: 68ch; }
p.lede { font-size: var(--fs-md); color: var(--fg-2); }

a { color: var(--link); text-decoration-line: underline; text-decoration-thickness: 2px;
    text-decoration-color: var(--link-underline); text-underline-offset: 4px;
    transition: text-decoration-color var(--dur-fast) var(--ease-out); }
a:hover { text-decoration-color: var(--ink); }

small, .meta { font-size: var(--fs-sm); color: var(--fg-3); }

/* --- Eyebrow / kicker — small mono caps ---------------------------------- */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--fg-3);
}
.eyebrow::before { content: "[ "; color: var(--acid); }
.eyebrow::after  { content: " ]"; color: var(--acid); }

/* --- Code & mono ---------------------------------------------------------- */
code, kbd, samp, pre {
  font-family: var(--font-mono);
  font-size: 0.92em;
}
code {
  background: var(--bg-sunken);
  padding: 0.1em 0.35em;
  border-radius: var(--r-2);
  border: 1px solid var(--border);
}
pre {
  background: var(--ink-900);
  color: var(--paper);
  padding: var(--s-5);
  border-radius: var(--r-3);
  overflow-x: auto;
  line-height: var(--lh-normal);
}
pre code { background: transparent; border: 0; padding: 0; }
kbd {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-bottom-width: 2px;
  border-radius: var(--r-2);
  padding: 0.1em 0.4em;
  font-size: 0.85em;
}

/* --- Long-form / serif --------------------------------------------------- */
.prose-serif {
  font-family: var(--font-serif);
  font-size: var(--fs-md);
  line-height: var(--lh-loose);
}

blockquote {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-lg);
  color: var(--fg-2);
  border-left: 3px solid var(--acid);
  padding-left: var(--s-5);
  margin: var(--s-6) 0;
}

hr { border: 0; border-top: 1px solid var(--rule); margin: var(--s-6) 0; }

/* --- Focus -------------------------------------------------------------- */
:where(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--shadow-acid);
  border-radius: var(--r-2);
}