/* ============================================================
   Silvanus design system — token sheet
   Defines variables only; no component is wired up yet.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700&family=Hanken+Grotesk:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ── Forest scale (primary brand / surfaces) ───────────────── */
  --forest-50:  #f1f5f1;
  --forest-100: #dde7dd;
  --forest-200: #b8ccb8;
  --forest-300: #8fae90;
  --forest-400: #67906a;
  --forest-500: #4a7350;
  --forest-600: #365a3d;
  --forest-700: #284530;
  --forest-800: #1c3324;
  --forest-900: #112019;
  --forest-950: #0c1712;

  /* ── Ink scale (neutral text / chrome) ─────────────────────── */
  --ink-50:  #f7f7f6;
  --ink-100: #ececea;
  --ink-200: #d8d8d4;
  --ink-300: #b9b9b3;
  --ink-400: #8a8a83;
  --ink-500: #5d5d57;
  --ink-600: #3f3f3b;
  --ink-700: #2a2a27;
  --ink-800: #1a1a18;
  --ink-900: #0e0e0d;

  /* ── Accent (signal chartreuse — ONE per view) ─────────────── */
  --accent:        #c8f24a;
  --accent-strong: #b3dc35;
  --accent-soft:   #e9fbb0;

  /* ── Data palette (charts, categorical) ────────────────────── */
  --data-1: #4a7350;  /* forest */
  --data-2: #c8f24a;  /* accent */
  --data-3: #8fae90;  /* forest-300 */
  --data-4: #d9a441;  /* ochre */
  --data-5: #6a8caf;  /* slate-blue */
  --data-6: #b8624a;  /* clay */
  --data-7: #4a4a73;  /* indigo-ink */
  --data-8: #8a8a83;  /* ink-400 */

  /* ── App semantic surface layer (Silvanus reskin) ──────────────
     Page / card / border / text tokens that the component layer
     consumes through the legacy aliases in styles.css. Light values
     live here; the dark swap is in the [data-theme="dark"] block below.
     --surface means a card / raised surface (aliased to --raised).
     Page background lives in --paper / --bg. */
  /* --surface means a card / raised surface. Page background is --paper / --bg. */
  --surface:      var(--raised);
  --raised:       #ffffff;            /* cards, panels, popovers */
  --topbar-bg:    rgba(244, 242, 236, .86);  /* translucent paper for backdrop blur */
  --border:       var(--ink-200);
  --border-soft:  var(--ink-100);
  --text:         var(--ink-800);
  --text-2:       var(--ink-700);
  --text-muted:   var(--ink-500);
  --text-faint:   var(--ink-400);
  --hover:        var(--forest-100);  /* subtle row / control hover */
  --chip-bg:      var(--forest-100);
  --chip-fg:      var(--forest-800);

  /* Positive / negative data signals (KPI deltas, table cells) */
  --data-up:      #16a34a;
  --data-down:    #dc2626;
  --data-up-soft:   rgba(22, 163, 74, 0.12);
  --data-down-soft: rgba(220, 38, 38, 0.10);

  /* Warm "ember" signal — sparkline-down fill, "needs attention"
     table status, caution badges. Forest has no warm tone, so these
     derive from the categorical clay / ochre data hues. */
  --ember:       #b8624a;             /* data-6 clay */
  --ember-soft:  rgba(184, 98, 74, 0.12);
  --warn:        #d9a441;             /* data-4 ochre */
  --warn-soft:   rgba(217, 164, 65, 0.14);
  --warn-strong: #9a6f1e;             /* readable ochre text on light */

  /* Channel hues — PROVISIONAL. Phase 7 sources these from the channel
     registry (channels are data, not structure). Forest-derived so the
     reskin reads as one family until the registry lands. Never hardcode
     a final channel set against these names. */
  --ch-facebook:  var(--data-1);      /* forest */
  --ch-instagram: var(--data-6);      /* clay */
  --ch-google:    var(--data-5);      /* slate-blue */
  --ch-whatsapp:  var(--data-up);     /* signal green */

  /* Page-bg alias kept independent of --surface so the component layer
     can repurpose --surface for cards without disturbing the page. */
  --bg:           var(--paper);       /* page surface = warm paper */
  --surface-alt:  var(--ink-50);
  --surface-deep: var(--forest-900);
  --text-inverse: var(--forest-50);
  --link:         var(--forest-600);

  /* Foreground colours that sit ON a filled chip / button, independent of
     the light/dark surface swap (a glyph on a forest fill stays paper-light;
     text on the chartreuse accent stays forest-ink). */
  --paper:        #F4F2EC;            /* warm bone white — page surface */
  --on-forest:    var(--forest-50);   /* glyph / label on forest fills */
  --on-accent:    var(--forest-900);  /* text on the chartreuse accent */

  /* ── Typography ────────────────────────────────────────────── */
  --font-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --font-sans:    'Hanken Grotesk', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  --fs-xs:   0.75rem;
  --fs-sm:   0.875rem;
  --fs-base: 1rem;
  --fs-md:   1.125rem;
  --fs-lg:   1.25rem;
  --fs-xl:   1.5rem;
  --fs-2xl:  2rem;
  --fs-3xl:  2.75rem;
  --fs-4xl:  3.75rem;

  --lh-tight: 1.1;
  --lh-snug:  1.25;
  --lh-base:  1.5;
  --lh-loose: 1.7;

  --tracking-tight: -0.02em;
  --tracking-base:  0;
  --tracking-wide:  0.04em;

  /* ── Radii ─────────────────────────────────────────────────── */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* ── Shadows ───────────────────────────────────────────────── */
  --shadow-xs: 0 1px 2px rgba(14, 14, 13, 0.04);
  --shadow-sm: 0 2px 4px rgba(14, 14, 13, 0.06), 0 1px 2px rgba(14, 14, 13, 0.04);
  --shadow-md: 0 6px 16px rgba(14, 14, 13, 0.08), 0 2px 4px rgba(14, 14, 13, 0.05);
  --shadow-lg: 0 16px 40px rgba(14, 14, 13, 0.12), 0 4px 10px rgba(14, 14, 13, 0.06);
  --shadow-accent: 0 6px 20px rgba(200, 242, 74, 0.35);

  /* Legacy alias kept for the period popover; resolves to --shadow-lg. */
  --sh-xl: var(--shadow-lg);

  /* ── Motion ──────────────────────────────────────────────────
     --ease is the bare easing curve; compose it with --duration-*.
     --transition is the compound duration+curve shorthand for the
     legacy styles.css callsites that wrote `transition: x var(--ease)`
     without supplying a duration. */
  --ease:       cubic-bezier(0.2, 0.7, 0.2, 1);
  --transition: 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  --duration-1: 120ms;
  --duration-2: 200ms;
  --duration-3: 320ms;
}

/* ── Dark-mode semantic swap (forest / ink) ──────────────────────
   Mirror of the light surface layer above; documentElement[data-theme]
   already cascades these to the whole app. */
[data-theme="dark"] {
  --raised:       var(--forest-900);  /* cards lift with a forest tint */
  --topbar-bg:    rgba(12, 23, 18, .86);  /* translucent dark forest for backdrop blur */
  --border:       var(--forest-800);
  --border-soft:  var(--ink-800);
  --text:         var(--ink-50);
  --text-2:       var(--ink-200);
  --text-muted:   var(--ink-400);
  --text-faint:   var(--ink-500);
  --hover:        var(--forest-800);
  --chip-bg:      var(--forest-800);
  --chip-fg:      var(--forest-100);
  --bg:           var(--forest-950);  /* dark forest page */

  /* Brighter signals read better on the near-black page. */
  --data-up:        #4ade80;
  --data-down:      #f87171;
  --data-up-soft:   rgba(74, 222, 128, 0.14);
  --data-down-soft: rgba(248, 113, 113, 0.14);
  --ember:          #d68a6e;
  --ember-soft:     rgba(214, 138, 110, 0.16);
  --warn:           #e2b765;
  --warn-soft:      rgba(226, 183, 101, 0.16);
  --warn-strong:    #e2b765;
}

/* ── Base body rules ─────────────────────────────────────────── */
body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ── Tabular numerals helper (for KPI rows, tables, currency) ─ */
.tnum {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* Peak mark — body inherits text color, apex carries the accent */
.sv-mark       { display: block; width: auto; }
.sv-mark__body { fill: currentColor; }
.sv-mark__apex { fill: var(--accent); }

.wordmark {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  color: var(--forest-800);
}

/* Button system — three fills, one geometry. One --accent per view. */
.sv-btn {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-sm);
  line-height: 1;
  border-radius: var(--radius-sm);
  padding: 11px 17px;
  border: 1px solid transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
  transition: transform var(--duration-1) var(--ease),
              background var(--duration-2) var(--ease),
              box-shadow var(--duration-2) var(--ease);
}
.sv-btn:active { transform: translateY(1px); }
.sv-btn[disabled] { cursor: not-allowed; opacity: .7; }

.sv-btn-accent { background: var(--accent); color: var(--on-accent); }
.sv-btn-accent:hover:not([disabled]) { box-shadow: var(--shadow-accent); }

.sv-btn-forest { background: var(--forest-800); color: var(--on-forest); }
.sv-btn-forest:hover:not([disabled]) { background: var(--forest-700); }

.sv-btn-ghost {
  background: transparent;
  color: var(--forest-800);
  border-color: var(--border);
}
.sv-btn-ghost:hover:not([disabled]) {
  border-color: var(--forest-400);
  background: var(--forest-50);
}

/* Mono eyebrow — section labels, micro-headings */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-faint);
}