/* =============================================================
   Search AI — Design Tokens (Phase 1 foundation)
   Source of truth: Figma "App - Search Ai" design system
   Naming: semantic (English). Primitive mauve/charbon scales are
   exposed too, so components can reference exact brand steps.
   ============================================================= */

:root {
  /* ---------- Brand · Mauve scale (from Figma "Mauve 1/2/3") ---------- */
  --c-mauve-1: #3C096C;        /* Mauve 1            — deepest purple (nav) */
  --c-mauve-1-mat: #7742AA;    /* Mauve 1 mat */
  --c-mauve-1-light: #AC80D6;  /* Mauve 1 light */
  --c-mauve-1-creme: #E5CBFD;  /* Mauve 1 creme */

  --c-mauve-2-light: #D3A7FA;  /* Mauve 2 light */
  --c-mauve-2-creme: #F3E4FF;  /* Mauve 2 creme */

  --c-mauve-3: #9D4EDD;        /* Mauve 3            — primary brand */
  --c-mauve-3-mat: #C387F5;    /* Mauve 3 mat */
  --c-mauve-3-light: #E0BAFF;  /* Mauve 3 light */
  --c-mauve-3-creme: #F6EBFF;  /* Mauve 3 creme */

  /* ---------- Brand · semantic ---------- */
  --c-primary: var(--c-mauve-3);          /* main brand / buttons / active */
  --c-primary-hover: var(--c-mauve-1-mat);/* darker hover */
  --c-primary-light: var(--c-mauve-3-light);
  --c-primary-subtle: var(--c-mauve-3-creme); /* active/selected background */

  --c-nav: var(--c-mauve-1);              /* top bar / deep nav surfaces */
  --c-nav-text: #FFFFFF;

  --c-accent: #EFED45;                    /* lime CTA ("Résumer …") */
  --c-accent-hover: #E3E12F;
  --c-accent-text: #1A1F16;               /* text on lime */
  --c-accent-lime: #CBFF8C;               /* light-green CTA fill (Figma "cta-ia") */
  --c-accent-lime-hover: #BCF577;

  /* ---------- Neutrals · Charbon ---------- */
  --c-bg: #F9F5FE;             /* Blanc charbon — page background */
  --c-surface: #FFFFFF;        /* cards / panels */
  --c-surface-alt: #F6EBFF;    /* subtle alt rows */
  --c-text: #1A1F16;           /* Noir charbon */
  --c-text-muted: #B5ACB9;     /* Gris charbon */
  --c-text-muted-strong: #6F6274; /* Gris charbon, plus foncé (même teinte) */
  --c-border: #ECE9F5;         /* Gris clair charbon */
  --c-border-strong: #B5ACB9;

  /* ---------- Status ---------- */
  --c-success: #43B929;
  --c-positive: #00BC67;       /* ranking evolution up-arrow (Figma "Variations/positive") */
  --c-danger: #EE3900;
  --c-warning: #F0AD4E;
  --c-info: var(--c-mauve-3);

  /* ---------- Priority level dots (Figma filter tags) ---------- */
  --c-priority-high: #E25454;
  --c-priority-mid: #FFA95D;
  --c-priority-low: #F4E88A;

  /* ---------- Typography ---------- */
  --font-head: "Bricolage Grotesque", "Manrope", sans-serif;
  --font-body: "Manrope", "Roboto", "Helvetica Neue", sans-serif;

  --fs-h3: 20px;   --fw-h3: 700;   /* H3 */
  --fs-h4: 14px;   --fw-h4: 600;   /* H4 */
  --fs-body: 14px;                 /* P2 */
  --fs-sm: 12px;                   /* P3 */
  --fs-xs: 11px;                   /* P4 */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* ---------- Radius ---------- */
  --radius-xs: 4px;            /* top-bar pills ("dropdown-fold") */
  --radius-sm: 8px;
  --radius: 12px;
  --radius-pill: 999px;

  /* ---------- Shadow / effects ---------- */
  --shadow-cherry: 1px 1px 4px 0 rgba(145, 47, 86, 0.40); /* "OMBRE CHERRY" */
  --shadow-card: 0 2px 12px 0 rgba(60, 9, 108, 0.06);
  --shadow-pop: 0 4px 20px 0 rgba(60, 9, 108, 0.12);
  --shadow-field: 0 1px 6px 1px rgba(0, 0, 0, 0.25); /* "shadow-citya" — inputs/popup */

  /* ---------- Spacing scale ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  /* ---------- Layout ---------- */
  --topbar-height: 56px;
  --sidebar-width: 220px;
  --sidebar-width-collapsed: 72px;
}