/* ============================================================
   Domanda Design System — CSS Custom Properties (tokens.css)
   Stack: Django + vanilla JS
   Direction: Warm Editorial
   Generated from: Domanda Design System.html
   ============================================================ */

:root {

  /* ── Colors ─────────────────────────────────────────────── */

  /* Brand — Indigo */
  --color-indigo:       #4F46E5;
  --color-indigo-light: #6366F1;
  --color-indigo-soft:  #ecebfd;
  --color-indigo-xsoft: #f3f2fe;

  /* Brand — Orange (accent / signature) */
  --color-orange:       #F97316;
  --color-orange-soft:  #fbe7d6;

  /* Neutrals */
  --color-ink:          #1c1917;   /* headings, primary text */
  --color-ink-2:        #3d3834;   /* rich body text */
  --color-ink-light:    #6b645d;   /* secondary text, labels */
  --color-ink-muted:    #9c9490;   /* helper text, placeholders */
  --color-border:       #e4ddd2;   /* default border */
  --color-border-light: #ede9e3;   /* subtle dividers */
  --color-paper:        #f6f1e9;   /* marketing page background */
  --color-paper-light:  #faf8f4;   /* component board bg, sidebar */
  --color-white:        #fffefb;   /* warm white cards */
  --color-surface:      #ffffff;   /* app surface / input bg */

  /* Status */
  --color-success:        #16a34a;
  --color-success-soft:   #dcfce7;
  --color-success-bg:     #f0fdf4;   /* alert success background */
  --color-success-border: #86efac;   /* alert success border */
  --color-success-text:   #166534;   /* dark text on success-soft bg */
  --color-danger:         #dc2626;
  --color-danger-soft:    #fee2e2;
  --color-danger-border:  #fca5a5;   /* alert/input danger border */
  --color-warning:        #d97706;
  --color-warning-soft:   #fef3c7;
  --color-warning-border: #fde68a;   /* alert warning border */
  --color-indigo-border:  #a5b4fc;   /* alert info border */

  /* Brand — Orange extended */
  --color-orange-dark:    #9a4b14;   /* dark orange text on orange-soft bg */

  /* ── Typography ─────────────────────────────────────────── */

  --font-display: 'Martel', Georgia, serif;   /* marketing headlines only */
  --font-sans:    'Martel Sans', sans-serif;  /* all UI text */
  --font-mono:    'Space Mono', monospace;    /* labels, tokens, meta */

  /* Scale */
  --text-xs:   11px;   /* fine print, mono labels */
  --text-sm:   13px;   /* small body, helper text */
  --text-base: 15px;   /* default body */
  --text-md:   16px;   /* body large */
  --text-lg:   18px;   /* card titles */
  --text-xl:   22px;   /* section titles */
  --text-2xl:  28px;   /* page titles */
  --text-3xl:  36px;   /* display small */
  --text-4xl:  48px;   /* display medium */
  --text-5xl:  64px;   /* display large */
  --text-6xl:  80px;   /* hero headline */

  /* Font weights */
  --weight-regular:   400;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-extrabold: 800;
  --weight-black:     900;

  /* Line heights */
  --leading-tight:   1.05;
  --leading-snug:    1.25;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  /* Letter spacing */
  --tracking-tight:  -0.025em;
  --tracking-normal:  0;
  --tracking-wide:    0.06em;
  --tracking-wider:   0.12em;
  --tracking-widest:  0.18em;

  /* ── Spacing (4px grid) ──────────────────────────────────── */

  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;

  /* ── Button padding ─────────────────────────────────────── */

  --btn-padding-sm: 8px 18px;   /* small action buttons — app rows, inline CTAs */
  --btn-padding-md: 11px 22px;  /* default button size */

  /* ── Border radius ──────────────────────────────────────── */

  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   8px;    /* buttons, inputs, small cards */
  --radius-lg:   12px;   /* feature cards */
  --radius-xl:   16px;   /* large cards */
  --radius-2xl:  22px;   /* modals, chat card, pricing */
  --radius-full: 999px;  /* pills, badges, avatars */

  /* ── Shadows ─────────────────────────────────────────────── */

  --shadow-sm:  0 1px 3px rgba(28, 25, 23, 0.10);
  --shadow-md:  0 4px 12px rgba(28, 25, 23, 0.12);
  --shadow-lg:  0 12px 32px rgba(28, 25, 23, 0.14);
  --shadow-xl:  0 28px 60px rgba(28, 25, 23, 0.18);

  /* ── Transitions ─────────────────────────────────────────── */

  --transition-fast:   100ms ease;
  --transition-base:   160ms ease;
  --transition-slow:   280ms ease;

  /* ── Z-index scale ───────────────────────────────────────── */

  --z-dropdown:  100;
  --z-sticky:    200;
  --z-offcanvas: 300;
  --z-modal:     400;
  --z-toast:     500;
}