/* ============================================================
   Curacta — Pastel (lavender) homepage tokens
   ------------------------------------------------------------
   Pastel-leaning reskin of the Curacta brand.
   Forest green is KEPT as the structural anchor (display type,
   primary actions, deep section bands). Lavender/lilac becomes
   the soft surface family. Terracotta + Instrument Serif are
   retired here in favour of a pure-sans, single-violet-accent
   system. JetBrains Mono is kept for real-data numerics.
   ============================================================ */

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

:root {
  /* ---- Lilac / lavender (soft surface family) ---- */
  --lilac-50:   #f7f5fc;
  --lilac-100:  #f0ebfa;
  --lilac-200:  #e5dcf5;
  --lilac-300:  #d3c4ef;
  --lilac-400:  #bba6e4;
  --lilac-500:  #a085d6;
  --lilac-600:  #8465be;   /* primary accent (violet) */
  --lilac-700:  #6b4ea4;
  --lilac-800:  #4f3a79;

  /* ---- Forest (kept anchor) ---- */
  --forest-50:  #eef5f1;
  --forest-100: #e0efe5;
  --forest-500: #2d5e4b;
  --forest-600: #1a4636;
  --forest-700: #11332a;   /* anchor brand green */
  --forest-800: #0a241d;
  --forest-900: #051914;

  /* ---- Ink (cool-warm neutral) ---- */
  --paper:      #ffffff;
  --ink-50:     #f6f6f8;
  --ink-100:    #eceaf1;
  --ink-200:    #ddd9e4;
  --ink-300:    #c2bcce;
  --ink-400:    #968fa6;
  --ink-500:    #6f6982;
  --ink-600:    #524d63;
  --ink-700:    #393545;
  --ink-800:    #221f2b;
  --ink-900:    #18151f;

  /* ---- Signals (softened, pastel) ---- */
  --signal-good-bg:   #e4f0e7;
  --signal-good-text: #2e6b43;
  --signal-good-dot:  #3a8055;
  --signal-warn-bg:   #f6edd7;
  --signal-warn-text: #876621;
  --signal-warn-dot:  #b08522;
  --signal-bad-bg:    #f5dfe3;
  --signal-bad-text:  #a23a4c;
  --signal-bad-dot:   #c44d61;

  /* ---- Type ---- */
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ---- Tweakable knobs (overridden by Tweaks panel) ---- */
  --accent:        var(--lilac-600);   /* single highlight colour */
  --accent-soft:   var(--lilac-100);
  --radius-card:   18px;
  --radius-btn:    10px;

  /* ---- Shadows (cool violet tint, very subtle) ---- */
  --shadow-sm: 0 1px 2px rgba(36, 28, 56, 0.04), 0 1px 3px rgba(36, 28, 56, 0.05);
  --shadow-md: 0 2px 6px rgba(36, 28, 56, 0.06), 0 8px 24px rgba(36, 28, 56, 0.07);
  --shadow-lg: 0 4px 10px rgba(36, 28, 56, 0.08), 0 18px 48px rgba(36, 28, 56, 0.10);
  --shadow-xl: 0 10px 24px rgba(36, 28, 56, 0.10), 0 30px 80px rgba(36, 28, 56, 0.14);

  /* ---- Motion ---- */
  --t-fast: 120ms ease;
  --t-base: 180ms ease;
}

/* ============================================================
   THEME A — "Airy editorial"
   White-dominant, generous whitespace, lavender washes,
   forest-green type. Larger radii.
   ============================================================ */
[data-dir="a"] {
  --page-bg:        var(--paper);
  --band-bg:        var(--lilac-50);
  --band-bg-2:      var(--lilac-100);
  --hero-bg:        var(--paper);
  --hero-text:      var(--forest-700);
  --hero-sub:       var(--ink-600);
  --hero-eyebrow:   var(--accent);
  --card-bg:        var(--paper);
  --card-border:    var(--ink-200);
  --display-color:  var(--forest-700);
  --rc:             var(--radius-card);
}

/* ============================================================
   THEME B — "Confident colour-blocked"
   Lavender hero block, alternating colour bands, a deep
   forest-green data section. Tighter radii, more presence.
   ============================================================ */
[data-dir="b"] {
  --page-bg:        var(--paper);
  --band-bg:        var(--lilac-100);
  --band-bg-2:      var(--lilac-200);
  --hero-bg:        var(--lilac-200);
  --hero-text:      var(--forest-800);
  --hero-sub:       var(--forest-700);
  --hero-eyebrow:   var(--lilac-700);
  --card-bg:        var(--paper);
  --card-border:    var(--lilac-200);
  --display-color:  var(--forest-800);
  --rc:             12px;
}

/* ---- shared base ---- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  color: var(--ink-900);
  background: var(--page-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
::selection { background: var(--lilac-200); }