/* ===================================================================
   tokens.css — Single source of truth for color / typography tokens
   Spec ref: docs/superpowers/specs/2026-05-06-learn-flowlence-com-redesign-design.md §4
   =================================================================== */

:root {
  /* ---------- Flowlence-owned ---------- */
  --flowlence-orange: #F7862F;
  --flowlence-orange-light: #F9A443;
  --flowlence-orange-dark: #E0792B;
  --flowlence-cream: #FFF7E6;
  --flowlence-slate: #0F172A;

  /* ---------- BGC-owned ---------- */
  --bgc-coral: #F8568D;
  --bgc-magenta: #C026D3;
  --bgc-blush: #FFE8F0;

  /* ---------- Shared / Ribbon ---------- */
  --ribbon-gradient: linear-gradient(90deg, #F7862F 0%, #F8568D 50%, #C026D3 100%);
  --ribbon-gradient-soft: linear-gradient(135deg, #FFF7E6 0%, #FFFFFF 50%, #FFE8F0 100%);

  /* ---------- Pillars (default = Flowlence orange) ---------- */
  --pillar: var(--flowlence-orange);
  --pillar-light: rgba(247, 134, 47, 0.08);
  --pillar-border: rgba(247, 134, 47, 0.2);

  /* ---------- Typography ---------- */
  --font-display: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", "Consolas", "Courier New", monospace;

  /* ---------- Material variable wiring ---------- */
  --md-primary-fg-color: var(--flowlence-orange);
  --md-primary-fg-color--light: var(--flowlence-orange-light);
  --md-primary-fg-color--dark: var(--flowlence-orange-dark);
  --md-accent-fg-color: var(--bgc-coral);
}

/* ---------- Per-pillar scoping ---------- */
[data-pillar="agriculture"] {
  --pillar: #16A34A;
  --pillar-light: rgba(22, 163, 74, 0.08);
  --pillar-border: rgba(22, 163, 74, 0.2);
}
[data-pillar="parking"] {
  --pillar: #2563EB;
  --pillar-light: rgba(37, 99, 235, 0.08);
  --pillar-border: rgba(37, 99, 235, 0.2);
}
[data-pillar="safety"] {
  --pillar: #DC2626;
  --pillar-light: rgba(220, 38, 38, 0.08);
  --pillar-border: rgba(220, 38, 38, 0.2);
}
[data-pillar="temperature"] {
  --pillar: #0D9488;
  --pillar-light: rgba(13, 148, 136, 0.08);
  --pillar-border: rgba(13, 148, 136, 0.2);
}

/* ---------- Dark mode (slate scheme) ---------- */
[data-md-color-scheme="slate"] {
  --md-primary-fg-color: var(--flowlence-orange);
  --md-primary-fg-color--light: var(--flowlence-orange-light);
  --md-primary-fg-color--dark: var(--flowlence-orange-dark);
  --md-accent-fg-color: var(--bgc-coral);
}