/* ============================================================
   lulab — design tokens
   carnet de labo: mono + sans, ink-on-paper, no serif.
   adapted FROM the Claude design system, but stripped of
   parchment/terracotta/serif — replaced with off-white + ink.
   ============================================================ */

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

:root {
  /* ---------- SURFACES (light) ---------- */
  --paper:      #f6f5ef;   /* page bg — warm bone, not parchment */
  --paper-2:    #ecebe3;   /* sunken band / gridline tone */
  --card:       #fbfaf6;   /* card surface */
  --ink:        #16160f;   /* primary text */
  --ink-2:      #565550;   /* secondary text */
  --ink-3:      #8a8980;   /* tertiary text / metadata */
  --rule:       #e5e3d8;   /* hairline */
  --rule-2:     #d4d2c5;   /* prominent rule */

  /* ---------- ACCENT — tweakable; default ink-blue ---------- */
  --accent:     #3c5a7a;
  --accent-2:   #5577a0;
  --accent-on:  #f6f5ef;   /* fg on accent */

  /* semantic */
  --focus:      #3898ec;

  /* ---------- TYPE FAMILIES ---------- */
  --font-sans:  'Inter', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --font-mono:  'JetBrains Mono', 'SFMono-Regular', Menlo, Consolas, monospace;

  /* ---------- TYPE SCALE ---------- */
  --fs-xs:    11px;  --lh-xs:    1.45;
  --fs-sm:    13px;  --lh-sm:    1.55;
  --fs-md:    15px;  --lh-md:    1.65;
  --fs-lg:    17px;  --lh-lg:    1.65;
  --fs-xl:    22px;  --lh-xl:    1.40;
  --fs-2xl:   30px;  --lh-2xl:   1.25;
  --fs-3xl:   44px;  --lh-3xl:   1.10;
  --fs-4xl:   64px;  --lh-4xl:   1.05;

  --tracking-tight:  -0.01em;
  --tracking-wide:    0.08em;

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

  /* ---------- RADII ---------- */
  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 10px;

  /* ---------- MOTION ---------- */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 140ms;
  --dur-med:  240ms;
  --dur-slow: 480ms;

  /* ---------- LAYOUT ---------- */
  --container:   1080px;
  --column:      720px;

  /* ---------- DENSITY (tweakable) ---------- */
  --density-pad-y: 96px;     /* between sections */
  --density-stack: 48px;     /* between blocks within a section */
  --density-card:  20px;     /* card padding */
}

/* ---------- DARK ---------- */
[data-theme="dark"] {
  --paper:      #0f0f0c;
  --paper-2:    #171714;
  --card:       #161613;
  --ink:        #ece9dc;
  --ink-2:      #9c9b91;
  --ink-3:      #6b6a62;
  --rule:       #25241f;
  --rule-2:     #34332c;
  --accent-on:  #0f0f0c;
}

/* ---------- DENSITY MODES ---------- */
[data-density="compact"] {
  --density-pad-y: 64px;
  --density-stack: 32px;
  --density-card:  16px;
}
[data-density="spacious"] {
  --density-pad-y: 144px;
  --density-stack: 72px;
  --density-card:  28px;
}