/**
 * Tutobox Design System — Colors & Type
 * ------------------------------------------------------------------
 * Single source of truth for the --ds-* CSS variables used across
 * the Tutobox product. Mirrors frontend/src/styles/design-system.css
 * in the source repo, plus a few semantic aliases (fg1, h1, code, …)
 * useful when designing in HTML outside the React app.
 *
 * Principles
 *   • Brand sans: Manrope (geometric, enterprise with personality).
 *     System-ui kept as the fallback chain for fast first paint.
 *   • Brand mono: JetBrains Mono.
 *   • 4 px grid for spacing.
 *   • Enterprise vibe: slate-800 primary, teal-600 accent, no gradients.
 *   • Subtle shadows. Borders carry most of the structural weight.
 *
 * Font substitution note
 *   Manrope + JetBrains Mono are *proposed* brand fonts pulled from
 *   Google Fonts. If you have an official Tutobox font licence (e.g.
 *   a foundry-bought face), replace the @import below with your
 *   self-hosted @font-face declarations and keep the same variable
 *   names — nothing else in the system needs to change.
 */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ── Font stacks ──────────────────────────────────────────────── */
  --ds-font-sans: "Manrope", ui-sans-serif, system-ui, -apple-system,
    "Segoe UI", Roboto, "Noto Sans", "Liberation Sans", sans-serif;
  --ds-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo,
    Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  /* ── Type scale ───────────────────────────────────────────────── */
  --ds-text-xs:  12px;
  --ds-text-sm:  14px;
  --ds-text-md:  16px;
  --ds-text-lg:  20px;
  --ds-text-xl:  24px;
  --ds-text-2xl: 32px;

  --ds-lineheight-tight:  1.3;
  --ds-lineheight-normal: 1.6;

  /* ── Semantic type roles ──────────────────────────────────────── */
  --ds-h1: 700 var(--ds-text-2xl) / var(--ds-lineheight-tight) var(--ds-font-sans);
  --ds-h2: 600 var(--ds-text-xl)  / var(--ds-lineheight-tight) var(--ds-font-sans);
  --ds-h3: 600 var(--ds-text-lg)  / var(--ds-lineheight-tight) var(--ds-font-sans);
  --ds-body:    400 var(--ds-text-sm) / var(--ds-lineheight-normal) var(--ds-font-sans);
  --ds-body-lg: 400 var(--ds-text-md) / var(--ds-lineheight-normal) var(--ds-font-sans);
  --ds-label:   500 var(--ds-text-sm) / var(--ds-lineheight-tight)  var(--ds-font-sans);
  --ds-caption: 400 var(--ds-text-xs) / var(--ds-lineheight-normal) var(--ds-font-sans);
  --ds-code:    400 var(--ds-text-xs) / var(--ds-lineheight-normal) var(--ds-font-mono);

  /* ── Spacing (4 px grid) ──────────────────────────────────────── */
  --ds-space-1:  4px;
  --ds-space-2:  8px;
  --ds-space-3:  12px;
  --ds-space-4:  16px;
  --ds-space-6:  24px;
  --ds-space-8:  32px;
  --ds-space-12: 48px;
  --ds-space-16: 64px;

  /* ── Radii ────────────────────────────────────────────────────── */
  --ds-radius-xs:   4px;
  --ds-radius-sm:   6px;
  --ds-radius-md:   8px;
  --ds-radius-lg:  12px;
  --ds-radius-pill: 999px;

  /* ── Core palette (raw) ───────────────────────────────────────── */
  --ds-black:     #010102;
  --ds-slate-900: #0f172a;
  --ds-slate-800: #1e293b;
  --ds-slate-700: #334155;
  --ds-slate-600: #1e293b;
  --ds-slate-500: #334155;
  --ds-slate-400: #94a3b8;
  --ds-slate-350: #acb0b3;
  --ds-slate-300: #cbd5e1;
  --ds-slate-200: #e2e8f0;
  --ds-slate-100: #f1f5f9;
  --ds-slate-50:  #f8fafc;
  --ds-blue-600:  #2563eb;
  --ds-blue-500:  #3b82f6;
  --ds-blue-400:  #94a8cf;
  --ds-blue-300:  #93c5fd;
  --ds-blue-100:  #dbeafe;
  --ds-blue-50:   #eff6ff;
  --ds-teal-700:  #0f766e;
  --ds-teal-600:  #0d9488;
  --ds-teal-500:  #14b8a6;
  --ds-teal-100:  #ccfbf1;
  --ds-teal-50:   #f0fdfa;
  --ds-green-700: #047857;
  --ds-green-600: #059669;
  --ds-green-500: #10b981;
  --ds-green-50:  #f0fdf4;
  --ds-amber-600: #b45309;
  --ds-amber-500: #f59e0b;
  --ds-amber-400: #d97706;
  --ds-amber-100: rgba(245, 158, 11, 0.12);
  --ds-amber-50:  #fffbeb;
  --ds-red-700:   #b91c1c;
  --ds-red-600:   #dc2626;
  --ds-red-500:   #ef4444;
  --ds-red-400:   #cf6262;
  --ds-red-100:   rgba(239, 68, 68, 0.08);
  --ds-red-50:    #fef2f2;
  --ds-orange-50:  #fff7ed;
  --ds-orange-700: #c2410c;
  --ds-sand-500:   #aa917b;

  /* ── Semantic colors (surfaces) ───────────────────────────────── */
  --ds-color-bg:             #ffffff;
  --ds-color-surface:        #ffffff;
  --ds-color-surface-muted:  #f8f9fa;
  --ds-color-border:         #cbd5e1;
  --ds-color-border-strong:  #94a3b8;
  --ds-surface-alt:           #fafafa;
  --ds-surface-accent-subtle: rgba(37, 99, 235, 0.08);
  --ds-surface-accent-muted:  rgba(37, 99, 235, 0.10);

  /* ── Semantic colors (text) ───────────────────────────────────── */
  --ds-color-text:         #111827;        /* fg1 — near-black */
  --ds-color-text-muted:   #6b7280;        /* fg2 */
  --ds-color-text-subtle:  #9ca3af;        /* fg3 */
  --ds-color-text-inverse: #ffffff;

  /* ── Semantic colors (intent) ─────────────────────────────────── */
  --ds-color-primary:        var(--ds-slate-800);
  --ds-color-primary-hover:  var(--ds-slate-900);
  --ds-color-accent:         #2563eb; /* blue-600 — trust blue (Stripe-adjacent) */
  --ds-color-accent-hover:   #1d4ed8; /* blue-700 */

  --ds-color-success: var(--ds-green-500);
  --ds-color-warning: var(--ds-amber-500);
  --ds-color-danger:  var(--ds-red-500);
  --ds-color-recording: var(--ds-red-500);  /* live-recording dot */

  /* ── Shadows (subtle, enterprise) ─────────────────────────────── */
  --ds-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.05);
  --ds-shadow-2xs: 0 1px 2px rgba(15, 23, 42, 0.04);
  --ds-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --ds-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.10);
  --ds-shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.14);
  --ds-shadow-recording: 0 0 0 4px rgba(239, 68, 68, 0.15);

  /* ── Focus ring ───────────────────────────────────────────────── */
  --ds-focus-ring: 0 0 0 3px rgba(37, 99, 235, 0.28);

  /* ── Layout ───────────────────────────────────────────────────── */
  --ds-container-max: 1100px;

  /* ── Motion ───────────────────────────────────────────────────── */
  --ds-ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ds-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ds-duration-fast:   150ms;
  --ds-duration-normal: 200ms;
  --ds-duration-slow:   300ms;

  /* ── Alpha overlays & tinted borders ─────────────────────────── */
  --ds-border-alpha:          rgba(15, 23, 42, 0.14);
  --ds-border-accent-subtle:  rgba(37, 99, 235, 0.18);
  --ds-border-accent-muted:   rgba(37, 99, 235, 0.30);
  --ds-border-accent-hover:   rgba(37, 99, 235, 0.35);
  --ds-border-danger-subtle:  rgba(239, 68, 68, 0.25);

  --ds-color-text-inverse-muted: rgba(255, 255, 255, 0.78);
  --ds-surface-inverse-subtle:   rgba(255, 255, 255, 0.06);
  --ds-surface-inverse-muted:    rgba(255, 255, 255, 0.12);
  --ds-border-inverse:           rgba(255, 255, 255, 0.18);
  --ds-border-inverse-strong:    rgba(255, 255, 255, 0.32);

  --ds-focus-glow: 0 0 0 3px rgba(37, 99, 235, 0.14);

  /* Static dark anchor — never flips, used for .lp-cta background */
  --ds-bg-inverse: #0f172a;
}

/* Dark-mode tokens.
   Applied in two cases, with explicit user choice taking precedence:
     1. :root[data-theme="dark"]  — forced via Paramètres → Apparence → Sombre
     2. système en mode sombre, UNIQUEMENT si l'utilisateur n'a pas forcé
        un thème (mode « Auto »).
   data-theme="light" force le clair en n'activant aucun de ces blocs.
   La liste de tokens est identique dans les deux sélecteurs (duplication
   assumée : pas de build step pour factoriser, le contrat reste la valeur). */
:root[data-theme="dark"] {
    --ds-color-bg:            #0b1220;
    --ds-color-surface:       #0f172a;
    --ds-color-surface-muted: #111c33;
    --ds-color-border:        #4a6090;
    --ds-color-border-strong: #5a709a;
    --ds-color-text:          #e5e7eb;
    --ds-color-text-muted:    #94a3b8;
    --ds-color-text-subtle:   #64748b;
    --ds-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35);
    --ds-shadow-md: 0 6px 18px rgba(0, 0, 0, 0.40);
    --ds-shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.55);

    /* Palette inversée — les tokens raw slate deviennent lisibles sur fond sombre */
    --ds-slate-900: #f1f5f9;
    --ds-slate-800: #e2e8f0;
    --ds-slate-700: #cbd5e1;
    --ds-slate-600: #94a3b8;
    --ds-slate-500: #94a3b8;
    --ds-slate-400: #64748b;
    --ds-slate-300: #5a709a;
    --ds-slate-200: #4a6090;
    --ds-slate-100: #162032;
    --ds-slate-50:  #0f1a2e;

    /* Intent tokens adaptés au fond sombre */
    --ds-color-primary:       var(--ds-slate-400);
    --ds-color-primary-hover: var(--ds-slate-300);
    --ds-color-accent:        #60a5fa;
    --ds-color-accent-hover:  #93c5fd;

    /* Tinted surfaces (alerts, badges) adaptés */
    --ds-blue-50:   #172554;
    --ds-blue-100:  #1e3a8a;
    --ds-amber-50:  #451a03;
    --ds-red-50:    #450a0a;
    --ds-green-50:  #052e16;

    /* Border alpha corrigé pour fond sombre */
    --ds-border-alpha: rgba(255, 255, 255, 0.22);

    /* L'ancre inverse reste sombre dans les deux modes */
    --ds-bg-inverse: #0f172a;
}

/* Mode « Auto » : suit le système, sauf si un thème explicite est forcé. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    --ds-color-bg:            #0b1220;
    --ds-color-surface:       #0f172a;
    --ds-color-surface-muted: #111c33;
    --ds-color-border:        #4a6090;
    --ds-color-border-strong: #5a709a;
    --ds-color-text:          #e5e7eb;
    --ds-color-text-muted:    #94a3b8;
    --ds-color-text-subtle:   #64748b;
    --ds-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35);
    --ds-shadow-md: 0 6px 18px rgba(0, 0, 0, 0.40);
    --ds-shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.55);

    /* Palette inversée — les tokens raw slate deviennent lisibles sur fond sombre */
    --ds-slate-900: #f1f5f9;
    --ds-slate-800: #e2e8f0;
    --ds-slate-700: #cbd5e1;
    --ds-slate-600: #94a3b8;
    --ds-slate-500: #94a3b8;
    --ds-slate-400: #64748b;
    --ds-slate-300: #5a709a;
    --ds-slate-200: #4a6090;
    --ds-slate-100: #162032;
    --ds-slate-50:  #0f1a2e;

    /* Intent tokens adaptés au fond sombre */
    --ds-color-primary:       var(--ds-slate-400);
    --ds-color-primary-hover: var(--ds-slate-300);
    --ds-color-accent:        #60a5fa;
    --ds-color-accent-hover:  #93c5fd;

    /* Tinted surfaces (alerts, badges) adaptés */
    --ds-blue-50:   #172554;
    --ds-blue-100:  #1e3a8a;
    --ds-amber-50:  #451a03;
    --ds-red-50:    #450a0a;
    --ds-green-50:  #052e16;

    /* Border alpha corrigé pour fond sombre */
    --ds-border-alpha: rgba(255, 255, 255, 0.22);

    /* L'ancre inverse reste sombre dans les deux modes */
    --ds-bg-inverse: #0f172a;
  }
}