/* ============================================================
   SMS BOOST — Tokens du design system
   (colors / typography / spacing / effects)

   Volontairement scopes sur .sb-ds et non sur :root :
   css/design-system.css definit deja --text-muted et
   --border-default avec d'autres valeurs, une declaration
   globale casserait le reste du site.

   Usage : ajouter la classe sb-ds sur le conteneur racine
   de la page, puis utiliser les tokens dans son CSS dedie.
   La police (--font-sans) vient, elle, de design-system.css.
   ============================================================ */

.sb-ds {
    /* ---- Brand blue ---- */
    --blue-50: #eff6ff;
    --blue-100: #dbeafe;
    --blue-200: #bfdbfe;
    --blue-300: #93c5fd;
    --blue-400: #60a5fa;
    --blue-500: #3b82f6;
    --blue-600: #2563eb;
    --blue-700: #1d4ed8;
    --blue-800: #1e40af;
    --blue-900: #1e3a8a;

    /* ---- Slate ---- */
    --slate-50: #f8fafc;
    --slate-100: #f1f5f9;
    --slate-200: #e2e8f0;
    --slate-300: #cbd5e1;
    --slate-400: #94a3b8;
    --slate-500: #64748b;
    --slate-600: #475569;
    --slate-700: #334155;
    --slate-800: #1e293b;
    --slate-900: #0f172a;
    --white: #ffffff;

    /* ---- Status ---- */
    --green-50: #f0fdf4;
    --green-100: #dcfce7;
    --green-500: #22c55e;
    --green-600: #16a34a;
    --green-700: #15803d;
    --red-100: #fee2e2;
    --red-500: #ef4444;
    --red-700: #b91c1c;
    --amber-100: #fef3c7;
    --amber-500: #f59e0b;
    --amber-600: #d97706;
    --violet-100: #ede9fe;
    --violet-600: #7c3aed;
    --rose-100: #ffe4e6;
    --rose-600: #e11d48;
    --sky-100: #e0f2fe;
    --sky-600: #0284c7;

    /* ---- Semantiques ---- */
    --color-primary: var(--blue-600);
    --color-primary-hover: var(--blue-700);
    --color-accent: var(--blue-500);
    --color-accent-soft: var(--blue-400);
    --text-strong: var(--slate-900);
    --text-body: var(--slate-600);
    --sb-text-muted: var(--slate-500);
    --text-faint: var(--slate-400);
    --text-link: var(--blue-600);
    --text-on-brand: var(--white);
    --surface-page: var(--slate-50);
    --surface-card: var(--white);
    --surface-dark: var(--slate-900);
    --sb-border: var(--slate-200);
    --border-strong: var(--slate-300);
    --border-focus: var(--blue-500);
    --color-danger: var(--red-500);
    --color-danger-bg: var(--red-100);
    --color-danger-text: var(--red-700);
    --color-success: var(--green-500);
    --color-success-bg: var(--green-100);
    --color-success-text: var(--green-700);
    --color-info-bg: var(--blue-50);
    --color-info-text: var(--blue-700);
    --gradient-hero: linear-gradient(135deg, #0f172a 0%, #15265a 45%, #1e3fa4 100%);
    --gradient-cta: linear-gradient(120deg, #eff6ff 0%, #dbeafe 100%);

    /* ---- Tuiles (fond pastel / icone pleine) ---- */
    --tile-blue-bg: var(--blue-100);
    --tile-blue-fg: var(--blue-600);
    --tile-green-bg: var(--green-100);
    --tile-green-fg: var(--green-600);
    --tile-amber-bg: var(--amber-100);
    --tile-amber-fg: var(--amber-600);
    --tile-rose-bg: var(--rose-100);
    --tile-rose-fg: var(--rose-600);
    --tile-violet-bg: var(--violet-100);
    --tile-violet-fg: var(--violet-600);
    --tile-sky-bg: var(--sky-100);
    --tile-sky-fg: var(--sky-600);

    /* ---- Typo (--font-sans vient de design-system.css) ---- */
    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;
    --weight-extra: 800;
    --font-display-lg: var(--weight-extra) 48px/1.1 var(--font-sans);
    --font-display-md: var(--weight-bold) 38px/1.1 var(--font-sans);
    --font-h1: var(--weight-bold) 30px/1.25 var(--font-sans);
    --font-h2: var(--weight-bold) 24px/1.25 var(--font-sans);
    --font-h3: var(--weight-semibold) 20px/1.25 var(--font-sans);
    --font-body-lg: var(--weight-regular) 18px/1.65 var(--font-sans);
    --font-body: var(--weight-regular) 16px/1.5 var(--font-sans);
    --font-label: var(--weight-semibold) 14px/1.5 var(--font-sans);
    --font-caption: var(--weight-medium) 12px/1.5 var(--font-sans);
    --font-eyebrow: var(--weight-bold) 12px/1.5 var(--font-sans);

    /* ---- Effets ---- */
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-2xl: 24px;
    --radius-full: 9999px;
    --shadow-xs: 0 1px 2px rgba(15, 23, 42, .06);
    --shadow-sm: 0 1px 3px rgba(15, 23, 42, .08), 0 1px 2px rgba(15, 23, 42, .04);
    --shadow-md: 0 4px 12px rgba(15, 23, 42, .08), 0 2px 4px rgba(15, 23, 42, .04);
    --shadow-lg: 0 12px 28px rgba(15, 23, 42, .10), 0 4px 10px rgba(15, 23, 42, .05);
    --shadow-brand: 0 8px 20px rgba(37, 99, 235, .28);
    --ring-focus: 0 0 0 3px rgba(59, 130, 246, .35);
    --transition-base: all 180ms cubic-bezier(.4, 0, .2, 1);

    /* ---- Sizing ---- */
    --control-h-sm: 34px;
    --control-h-md: 42px;
    --control-h-lg: 52px;
    --container-max: 1160px;
}