/* asksathi_tokens.css — AskSathi warm-cream design system applied to SUS-impact-app */

:root {
  /* ---- canvas / surfaces ---- */
  --color-bg: #FAF8F4;
  --color-panel: #FFFFFF;
  --color-card: #FFFFFF;
  --color-card-raised: #F5F2EC;
  --color-modal: #FFFFFF;
  --color-border: #ECE7DD;
  --color-border-strong: #D6CFC2;

  /* ---- text ---- */
  --color-text-primary: #2C3A2D;
  --color-text-secondary: #4C6657;
  --color-text-faint: #6F7D74;
  --color-text-decorative: #9DAEBF;

  /* ---- accents ---- */
  --color-accent: #5E7C6B;
  --color-accent-soft: #EFF3EE;
  --color-flow-line: #9DAEBF;
  --color-flow-pulse: #5E7C6B;

  /* ---- severity ---- */
  --sev-red: #B5654D;
  --sev-red-soft: #FBF0EC;
  --sev-amber: #C9A84C;
  --sev-amber-ink: #856511;
  --sev-amber-soft: #FBF6E8;
  --sev-green: #5E7C6B;
  --sev-green-soft: #EFF3EE;
  --sev-grey: #9DAEBF;
  --sev-grey-ink: #566573;
  --sev-grey-soft: #F4F6F8;
  --state-pending: #C8D4CA;
  --state-ghost-opacity: .45;

  --sev-red-glyph: "⚠";
  --sev-amber-glyph: "◆";
  --sev-green-glyph: "✓";
  --sev-grey-glyph: "?";

  /* ---- typography ---- */
  --font-stack: "Hanken Grotesk", "Inter", system-ui, sans-serif;
  --font-body: "Hanken Grotesk", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", monospace;
  --font-display: "Newsreader", Georgia, serif;

  /* ---- header ---- */
  --header-title-size: 42px;
  --header-sub-size: 13px;
  --header-owner-size: 12px;

  /* ---- action accent ---- */
  --action-accent: #C9A84C;
  --action-accent-text: #2C1A00;
  --action-accent-hover: #D4B560;

  /* ---- intake boxes ---- */
  --box-bg: #FFFFFF;
  --box-border: #ECE7DD;
  --box-head-bg: linear-gradient(180deg, #EFF3EE 0%, #E7EFE8 100%);
  --box-title-size: 18px;
  --box-engrave: 0 1px 2px rgba(0,0,0,.03), 0 18px 44px -32px rgba(94,124,107,.25);
  /* v2.3.1 Fix 3: locked boxes are no longer blurred/dimmed — the padlock +
     non-interactivity carry the "not yet active" state (V231-01) */
  --tile-w: 164px;
  --tile-h: 60px;
  --tile-bg: #FAF8F4;
  --tile-border: #ECE7DD;
  --tile-selected-bg: #EFF3EE;
  --tile-selected-border: #5E7C6B;
  --tile-hover-bg: #EFF3EE;       /* promoted from an app.css literal (gate: values live here) */
  --tile-hover-border: #C8D4CA;
  --echo-bg: #EAE3D6;             /* "Built from your answers" panel; the map area shares it (v2.3, V23-11) */

  /* ---- stepper ---- */
  --step-dot: #D6CFC2;
  --step-dot-active: #5E7C6B;
  --step-dot-done: #5E7C6B;

  /* ---- score ring ---- */
  --ring-track: #ECE7DD;
  --ring-fill: #5E7C6B;
  --ring-size: 128px;                    /* v2.3.1 Fix 2: noticeably bigger */

  /* ---- sections ---- */
  --badge-bg: #B5654D;
  --badge-text: #ffffff;
  --section-good-accent: #5E7C6B;
  --section-bad-accent: #B5654D;
  --section-info-accent: #9DAEBF;

  /* ---- detail modal ---- */
  --detail-topic-size: 24px;
  --detail-flag-gap: 28px;
  --detail-close-bg: #EFF3EE;
  --detail-close-border: #C8D4CA;
  --gri-badge-bg: #F5F2EC;
  --gri-badge-text: #7A9485;
  --gri-badge-shadow: 0 1px 2px rgba(0,0,0,.05), inset 0 1px 0 rgba(255,255,255,.8);
  --gri-name-color: #2C3A2D;

  /* ---- download gate ---- */
  --download-bg: rgba(94,124,107,.07);
  --download-border: rgba(94,124,107,.28);
  --download-divider: rgba(94,124,107,.16);
  --download-btn-bg: #EFF3EE;
  --download-btn-border: #C8D4CA;
  --star-off: #D6CFC2;
  --star-on: #C9A84C;

  /* ---- map ---- */
  --node-core-w: 224px;
  --node-core-label: 15px;
  --node-band-w: 156px;
  --link-dotted: rgba(76,88,102,.62);   /* v2.3.1 Fix 1: real contrast on the tan map panel; dashes + 1.2px keep it subordinate to the solid flow arrows */
  --cart-color: rgba(157,174,191,.6);
  --globe-green: #5E7C6B;
  --globe-green-light: #7A9A85;

  /* ---- modal flag cards ---- */
  --flagcard-bg: #FAF8F4;
  --flagcard-border: #ECE7DD;
  --check-circle: #5E7C6B;

  /* ---- bar ---- */
  --bar-bg: #F5F2EC;
  --bar-border: #ECE7DD;

  /* ---- shape / space / type / motion ---- */
  --radius-node: 16px;
  --radius-tile: 10px;
  --radius-modal: 20px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 28px;
  --space-5: 52px;
  --font-size-body: 14px;
  --font-size-small: 12px;
  --font-size-heading: 18px;
  --shadow-node: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px -12px rgba(94,124,107,.18);
  --shadow-modal: 0 12px 48px rgba(94,124,107,.18), 0 2px 8px rgba(0,0,0,.06);
  --transition-soft: 280ms ease;
  --transition-quick: 140ms ease;
  --countup-ms: 600;
}