/* ─────────────────────────────────────────────
   Forij — design tokens
   Cream/paper neutrals, ink, food-coded accents.
   Each variant ships light + dark.
   ───────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600&display=swap');

:root {
  /* ── Type ───────────────────────── */
  --font-display: 'Lora', 'Iowan Old Style', Georgia, serif;
  --font-ui:      'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    'DM Mono', ui-monospace, 'JetBrains Mono', monospace;

  /* ── Surfaces (warm cream — DEFAULT) ─ */
  --bg-page:      #f5f1e8;   /* warmest cream — page */
  --bg-paper:     #fbf8f1;   /* paper — cards, surfaces */
  --bg-raised:    #ffffff;   /* most prominent surface */
  --bg-sunken:    #ede8db;   /* sunken — input fills */
  --bg-tint:      #f1ece0;   /* hover/secondary tint */

  /* ── Ink (text + lines) ──────────── */
  --ink:          #1e1c17;
  --ink-mid:      #5a5750;
  --ink-faint:    #a09d96;
  --ink-ghost:    #c8c4ba;

  --rule:         rgba(30, 28, 23, 0.08);
  --rule-mid:     rgba(30, 28, 23, 0.16);
  --rule-strong:  rgba(30, 28, 23, 0.28);

  /* ── Accent: olive (primary) ─────── */
  --accent:       #2d6a4f;
  --accent-hover: #1f5239;
  --accent-tint:  #e6efe8;
  --accent-ink:   #16412c;

  /* ── Food-coded categories ─────── */
  --cat-std:      #888780;   /* standard */
  --cat-std-tint: #ece9e0;
  --cat-std-ink:  #444441;

  --cat-safe:     #1d9e75;   /* safe bet (green) */
  --cat-safe-tint:#e1f0e8;
  --cat-safe-ink: #085041;

  --cat-adv:      #c67c1a;   /* adventure (amber) */
  --cat-adv-tint: #f6ead2;
  --cat-adv-ink:  #5a3608;

  --cat-proj:     #6a5fc7;   /* project (violet) */
  --cat-proj-tint:#ebe9f4;
  --cat-proj-ink: #2e2772;

  --cat-veg:      #7a9648;   /* veggie (sage) */
  --cat-veg-tint: #ecf0dc;
  --cat-veg-ink:  #2f4a0a;

  --cat-rec:      #4a7fb5;   /* recurring (blue) */
  --cat-rec-tint: #dde8f3;
  --cat-rec-ink:  #143764;

  /* ── Status ───────────────────── */
  --status-good:    #2d6a4f;
  --status-good-tint:#e6efe8;
  --status-warn:    #b86519;
  --status-warn-tint:#f6ead2;
  --status-bad:     #9b2c2c;
  --status-bad-tint: #f5dfdf;
  --rating-star:    #d99517;
  --ai-amber:       #c08a18;
  --ai-amber-tint:  #fbf0d2;
  --ai-amber-ink:   #6b4c00;

  /* ── Avatar tints ─────────────── */
  --av-1: #e6efe8;  --av-1-ink: #2d6a4f;
  --av-2: #f6ead2;  --av-2-ink: #5a3608;
  --av-3: #ebe9f4;  --av-3-ink: #2e2772;
  --av-4: #f5dfdf;  --av-4-ink: #791f1f;
  --av-5: #dde8f3;  --av-5-ink: #143764;
  --av-6: #ecf0dc;  --av-6-ink: #2f4a0a;

  /* ── Radius ───────────────────── */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-pill: 999px;

  /* ── Spacing scale (4-step) ───── */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;

  /* ── Shadows (soft, warm) ─────── */
  --shadow-sm:  0 1px 2px rgba(30,28,23,0.04), 0 0 0 0.5px rgba(30,28,23,0.06);
  --shadow-md:  0 2px 6px rgba(30,28,23,0.06), 0 0 0 0.5px rgba(30,28,23,0.08);
  --shadow-lg:  0 8px 24px rgba(30,28,23,0.08), 0 1px 3px rgba(30,28,23,0.06);
  --shadow-pop: 0 12px 36px rgba(30,28,23,0.14), 0 2px 6px rgba(30,28,23,0.08);

  /* ── Type scale ───────────────── */
  --t-display:   clamp(40px, 4.4vw, 56px);
  --t-h1:        32px;
  --t-h2:        24px;
  --t-h3:        18px;
  --t-body:      15px;
  --t-ui:        14px;
  --t-sm:        13px;
  --t-xs:        12px;
  --t-eyebrow:   11px;

  --lh-tight:    1.15;
  --lh-snug:     1.35;
  --lh-body:     1.55;
  --lh-loose:    1.7;

  --tracking-eyebrow: 0.08em;
  --tracking-display: -0.015em;

  /* ── 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:    220ms;
  --dur-slow:    360ms;
}

[data-theme="dark"] {
  --bg-page:      #16140f;
  --bg-paper:     #1d1b15;
  --bg-raised:    #25221b;
  --bg-sunken:    #14120e;
  --bg-tint:      #2b2820;

  --ink:          #efeadb;
  --ink-mid:      #b3ad9c;
  --ink-faint:    #7a7468;
  --ink-ghost:    #4a463d;

  --rule:         rgba(239, 234, 219, 0.08);
  --rule-mid:     rgba(239, 234, 219, 0.16);
  --rule-strong:  rgba(239, 234, 219, 0.28);

  --accent:       #5fb487;
  --accent-hover: #7fc7a0;
  --accent-tint:  #1a2e23;
  --accent-ink:   #aedcc1;

  --cat-std:      #a8a59d;
  --cat-std-tint: #2a2820;
  --cat-std-ink:  #d4d0c4;

  --cat-safe:     #4eb892;
  --cat-safe-tint:#0e2922;
  --cat-safe-ink: #9adfc1;

  --cat-adv:      #d99c4a;
  --cat-adv-tint: #2e1f0a;
  --cat-adv-ink:  #f0c477;

  --cat-proj:     #9388dd;
  --cat-proj-tint:#1f1c3d;
  --cat-proj-ink: #c8c2ee;

  --cat-veg:      #a3c061;
  --cat-veg-tint: #1d240e;
  --cat-veg-ink:  #cde29a;

  --cat-rec:      #7fa9d6;
  --cat-rec-tint: #122236;
  --cat-rec-ink:  #b8d2eb;

  --status-good:    #4eb892;
  --status-good-tint:#0e2922;
  --status-warn:    #d99c4a;
  --status-warn-tint:#2e1f0a;
  --status-bad:     #d97777;
  --status-bad-tint: #2e1414;
  --rating-star:    #e3ae3c;
  --ai-amber:       #d99c4a;
  --ai-amber-tint:  #2e1f0a;
  --ai-amber-ink:   #f0c477;

  --av-1: #1a2e23;  --av-1-ink: #9adfc1;
  --av-2: #2e1f0a;  --av-2-ink: #f0c477;
  --av-3: #1f1c3d;  --av-3-ink: #c8c2ee;
  --av-4: #2e1414;  --av-4-ink: #f0a8a8;
  --av-5: #122236;  --av-5-ink: #b8d2eb;
  --av-6: #1d240e;  --av-6-ink: #cde29a;

  --shadow-sm:  0 1px 2px rgba(0,0,0,0.4), 0 0 0 0.5px rgba(239,234,219,0.06);
  --shadow-md:  0 2px 6px rgba(0,0,0,0.4), 0 0 0 0.5px rgba(239,234,219,0.08);
  --shadow-lg:  0 8px 24px rgba(0,0,0,0.45), 0 1px 3px rgba(0,0,0,0.4);
  --shadow-pop: 0 12px 36px rgba(0,0,0,0.55), 0 2px 6px rgba(0,0,0,0.4);
}

/* ──────────────────────────────────────
   Variant: Stone (cooler, more reserved)
   ────────────────────────────────────── */
[data-palette="stone"] {
  --bg-page:      #ecebe6;
  --bg-paper:     #f5f4ef;
  --bg-raised:    #ffffff;
  --bg-sunken:    #e2e0d8;
  --bg-tint:      #e7e5dd;
}
[data-palette="stone"][data-theme="dark"] {
  --bg-page:      #15161a;
  --bg-paper:     #1d1f23;
  --bg-raised:    #25272c;
  --bg-sunken:    #14151a;
  --bg-tint:      #2a2c32;
}

/* ──────────────────────────────────────
   Variant: Toasted (warmer, terracotta)
   ────────────────────────────────────── */
[data-palette="toasted"] {
  --bg-page:      #f0e6d4;
  --bg-paper:     #f8f0df;
  --bg-raised:    #fffaf0;
  --bg-sunken:    #e6daC0;
  --bg-tint:      #ebe0c9;
  --accent:       #b8552d;
  --accent-hover: #8e3e1e;
  --accent-tint:  #f4dccd;
  --accent-ink:   #5e2410;
}
[data-palette="toasted"][data-theme="dark"] {
  --bg-page:      #1a140d;
  --bg-paper:     #221b12;
  --bg-raised:    #2c2418;
  --bg-sunken:    #15100a;
  --bg-tint:      #322a1c;
  --accent:       #d9764a;
  --accent-hover: #e6906a;
  --accent-tint:  #36190d;
  --accent-ink:   #e8b394;
}

/* ── Base reset, applied to design-system pages ──── */
.forij-base, .forij-base *, .forij-base *::before, .forij-base *::after {
  box-sizing: border-box;
}
.forij-base {
  margin: 0;
  padding: 0;
  font-family: var(--font-ui);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--ink);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "kern", "ss01";
}
.forij-base h1, .forij-base h2, .forij-base h3, .forij-base h4 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: var(--tracking-display);
  line-height: var(--lh-tight);
  color: var(--ink);
}
.forij-base button, .forij-base input, .forij-base textarea, .forij-base select {
  font-family: inherit;
}