/* ============================================================
   Little Bean · design tokens
   Import this stylesheet first; everything else builds on it.
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=Instrument+Serif:ital@0;1&family=JetBrains+Mono:wght@400;500&display=swap");

:root {
  /* ---------- Color · Moss (primary) ---------- */
  --lb-moss-100: #E5ECE3;   /* surface tint, hover */
  --lb-moss-300: #A7B7A2;   /* charts, dividers */
  --lb-moss-500: #5E7758;   /* PRIMARY · the bean */
  --lb-moss-700: #3E5340;   /* headlines, ink-on-cream */
  --lb-moss-900: #243223;   /* deepest, dark-mode bg */

  /* ---------- Color · Terracotta (accent) ---------- */
  --lb-terra-100: #F4DDCC;  /* soft toast bg */
  --lb-terra-300: #DFA489;  /* milestone tint */
  --lb-terra-500: #CC7959;  /* ACCENT · live, flagged */
  --lb-terra-700: #A55A3E;  /* active, pressed */
  --lb-terra-900: #7A3F26;  /* alert text */

  /* ---------- Color · Neutrals ---------- */
  --lb-cream:     #F4F1EA;  /* canvas */
  --lb-paper:     #FAF8F3;  /* cards */
  --lb-ink:       #2D2823;  /* body text */
  --lb-mute:      #847C71;  /* secondary text */
  --lb-line:      #E1DCD0;  /* hairline */
  --lb-line-2:    #CFC9BB;  /* stronger divider */

  /* ---------- Semantic aliases ---------- */
  --lb-bg:        var(--lb-cream);
  --lb-surface:   var(--lb-paper);
  --lb-text:      var(--lb-ink);
  --lb-text-mute: var(--lb-mute);
  --lb-brand:     var(--lb-moss-500);
  --lb-brand-ink: var(--lb-moss-700);
  --lb-accent:    var(--lb-terra-500);
  --lb-danger:    var(--lb-terra-700);
  --lb-border:    var(--lb-line);

  /* ---------- Type families ---------- */
  --lb-font-display: "Instrument Serif", Georgia, "Times New Roman", serif;
  --lb-font-sans:    "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --lb-font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ---------- Type scale (uses Public Sans unless noted) ---------- */
  --lb-text-2xs: 11px;
  --lb-text-xs:  12px;
  --lb-text-sm:  14px;
  --lb-text-md:  16px;
  --lb-text-lg:  18px;
  --lb-text-xl:  22px;
  --lb-text-2xl: 28px;
  --lb-text-3xl: 36px;
  --lb-text-display: 56px;
  --lb-text-hero:    104px;

  /* Line-heights */
  --lb-lh-tight:  1.05;
  --lb-lh-snug:   1.2;
  --lb-lh-normal: 1.5;

  /* Letter-spacing */
  --lb-ls-tight:  -0.02em;
  --lb-ls-mono:   0.06em;

  /* ---------- Spacing (4-px base) ---------- */
  --lb-space-1:  4px;
  --lb-space-2:  8px;
  --lb-space-3:  12px;
  --lb-space-4:  16px;
  --lb-space-5:  20px;
  --lb-space-6:  24px;
  --lb-space-8:  32px;
  --lb-space-10: 40px;
  --lb-space-12: 48px;
  --lb-space-16: 64px;
  --lb-space-20: 80px;

  /* ---------- Radii ---------- */
  --lb-r-xs:   4px;
  --lb-r-sm:   8px;
  --lb-r-md:   12px;
  --lb-r-lg:   16px;
  --lb-r-xl:   22px;
  --lb-r-2xl:  28px;
  --lb-r-pill: 999px;

  /* ---------- Shadows (warm, subtle) ---------- */
  --lb-shadow-1: 0 1px 0 rgba(40,30,15,0.04);
  --lb-shadow-2: 0 4px 12px -6px rgba(40,30,15,0.12);
  --lb-shadow-3: 0 12px 28px -10px rgba(40,30,15,0.18);
  --lb-shadow-4: 0 30px 60px -20px rgba(40,30,15,0.25);

  /* ---------- Motion ---------- */
  --lb-ease:    cubic-bezier(.2, .8, .2, 1);
  --lb-dur-1:   120ms;
  --lb-dur-2:   200ms;
  --lb-dur-3:   320ms;

  /* ---------- Hit targets ---------- */
  --lb-hit-min: 44px; /* iOS HIG, Material both ≥ 44/48 */
}

/* Page defaults */
html, body {
  background: var(--lb-bg);
  color: var(--lb-text);
  font-family: var(--lb-font-sans);
  font-size: var(--lb-text-md);
  line-height: var(--lb-lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Selection */
::selection { background: var(--lb-moss-300); color: var(--lb-moss-900); }

/* Focus ring (use on every interactive element) */
.lb-focus-ring:focus-visible,
:where(button, a, input, select, textarea):focus-visible {
  outline: 2px solid var(--lb-moss-700);
  outline-offset: 2px;
  border-radius: var(--lb-r-sm);
}