@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap");
/* ==========================================================================
   OrderTracker — Jetons de design
   --------------------------------------------------------------------------
   Source unique de vérité pour les couleurs, la typographie, les espacements
   et les ombres. Aucune valeur brute (#hex, px) ne doit apparaître ailleurs
   que dans ce fichier : tout le reste consomme ces variables.

   Deux axes de personnalisation :
   1. Thème clair / sombre — automatique, ou forcé par [data-theme].
   2. Couleur de marque de l'établissement — injectée à l'exécution sur
      :root par ui.js (applyBrand), à partir des données de l'organisation.
   ========================================================================== */

:root {
  /* --- Marque (valeurs par défaut, écrasées par établissement) ----------- */
  --brand: #4f8dff;
  --brand-contrast: #ffffff;
  --accent: #8b5cf6;
  --neon-cyan: #22d3ee;
  --neon-violet: #8b5cf6;
  --neon-blue: #4f8dff;
  --neon-mint: #38f2b2;

  /* Déclinaisons dérivées : évitent d'exiger 6 couleurs par client. */
  --brand-subtle: color-mix(in srgb, var(--brand) 12%, transparent);
  --brand-muted: color-mix(in srgb, var(--brand) 22%, transparent);
  --brand-strong: color-mix(in srgb, var(--brand) 85%, black);

  /* --- Typographie ------------------------------------------------------- */
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --text-2xs: 0.6875rem; /* 11px */
  --text-xs: 0.75rem;    /* 12px */
  --text-sm: 0.8125rem;  /* 13px */
  --text-base: 0.9375rem;/* 15px */
  --text-md: 1rem;       /* 16px */
  --text-lg: 1.125rem;   /* 18px */
  --text-xl: 1.375rem;   /* 22px */
  --text-2xl: 1.75rem;   /* 28px */
  --text-3xl: 2.25rem;   /* 36px */
  --text-4xl: 3rem;      /* 48px */

  --leading-tight: 1.15;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  --tracking-tight: -0.02em;
  --tracking-wide: 0.04em;
  --tracking-caps: 0.08em;

  /* --- Espacements (base 4px) -------------------------------------------- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;

  /* --- Rayons ------------------------------------------------------------ */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-full: 999px;

  /* --- Mouvement --------------------------------------------------------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 120ms;
  --duration-base: 220ms;
  --duration-slow: 420ms;

  /* --- Dimensions -------------------------------------------------------- */
  --page-max: 1200px;
  --page-narrow: 640px;
  --control-height: 42px;
  --control-height-lg: 52px;

  /* --- Couleurs : thème clair (défaut) ----------------------------------- */
  --surface-0: #edf5ff;
  --surface-1: #f9fcff;
  --surface-2: #e8f1fb;
  --surface-3: #d9e8f7;
  --surface-inset: #f1f7fd;

  --border: #cbdff0;
  --border-strong: #9fc1dc;
  --border-focus: var(--brand);

  --text-1: #071327;
  --text-2: #3c536d;
  --text-3: #6e859c;
  --text-inverse: #ffffff;

  --success: #15803d;
  --success-bg: #dcfce7;
  --warning: #b45309;
  --warning-bg: #fef3c7;
  --danger: #b91c1c;
  --danger-bg: #fee2e2;
  --info: #1d4ed8;
  --info-bg: #dbeafe;
  --neutral: #475569;
  --neutral-bg: #e8edf4;

  --shadow-sm: 0 1px 2px rgba(3, 18, 38, 0.08),
               0 5px 16px rgba(28, 117, 180, 0.06);
  --shadow-md: 0 8px 28px rgba(6, 35, 68, 0.11),
               0 0 0 1px rgba(49, 232, 255, 0.04);
  --shadow-lg: 0 24px 72px rgba(3, 22, 48, 0.18),
               0 0 36px rgba(79, 141, 255, 0.12);
  --shadow-focus: 0 0 0 3px color-mix(in srgb, var(--brand) 28%, transparent);

  --scrim: rgba(15, 23, 42, 0.45);

  color-scheme: light;
}

/* --- Couleurs : thème sombre --------------------------------------------- */
/* Défini deux fois pour couvrir les deux origines : la préférence système
   (sans attribut sur :root) et le choix explicite de l'utilisateur.          */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface-0: #151c30;
    --surface-1: #1c2540;
    --surface-2: #243050;
    --surface-3: #2f3d63;
    --surface-inset: #111729;

    --border: rgba(255, 255, 255, 0.13);
    --border-strong: rgba(255, 255, 255, 0.27);

    --text-1: #f1f4fc;
    --text-2: #bcc7dd;
    --text-3: #929fba;
    --text-inverse: #0a0d13;

    --success: #4ade80;
    --success-bg: rgba(34, 197, 94, 0.16);
    --warning: #fbbf24;
    --warning-bg: rgba(245, 158, 11, 0.16);
    --danger: #f87171;
    --danger-bg: rgba(239, 68, 68, 0.16);
    --info: #60a5fa;
    --info-bg: rgba(59, 130, 246, 0.16);
    --neutral: #94a3b8;
    --neutral-bg: rgba(148, 163, 184, 0.14);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 14px 34px rgba(0, 0, 0, 0.44), 0 0 26px rgba(79, 141, 255, 0.08);
    --shadow-lg: 0 28px 72px rgba(0, 0, 0, 0.56), 0 0 48px rgba(79, 141, 255, 0.12);

    --brand-strong: color-mix(in srgb, var(--brand) 80%, white);
    --scrim: rgba(0, 0, 0, 0.65);

    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --surface-0: #151c30;
  --surface-1: #1c2540;
  --surface-2: #243050;
  --surface-3: #2f3d63;
  --surface-inset: #111729;

  --border: rgba(255, 255, 255, 0.13);
  --border-strong: rgba(255, 255, 255, 0.27);

  --text-1: #f1f4fc;
  --text-2: #bcc7dd;
  --text-3: #929fba;
  --text-inverse: #0a0d13;

  --success: #4ade80;
  --success-bg: rgba(34, 197, 94, 0.16);
  --warning: #fbbf24;
  --warning-bg: rgba(245, 158, 11, 0.16);
  --danger: #f87171;
  --danger-bg: rgba(239, 68, 68, 0.16);
  --info: #60a5fa;
  --info-bg: rgba(59, 130, 246, 0.16);
  --neutral: #94a3b8;
  --neutral-bg: rgba(148, 163, 184, 0.14);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 14px 34px rgba(0, 0, 0, 0.44), 0 0 26px rgba(79, 141, 255, 0.08);
  --shadow-lg: 0 28px 72px rgba(0, 0, 0, 0.56), 0 0 48px rgba(79, 141, 255, 0.12);

  --brand-strong: color-mix(in srgb, var(--brand) 80%, white);
  --scrim: rgba(0, 0, 0, 0.65);

  color-scheme: dark;
}

/* --- Statuts de commande -------------------------------------------------- */
/* Une seule définition, réutilisée par les badges, la frise et les cartes. */

:root {
  --status-new: var(--neutral);
  --status-new-bg: var(--neutral-bg);
  --status-accepted: var(--info);
  --status-accepted-bg: var(--info-bg);
  --status-preparing: var(--warning);
  --status-preparing-bg: var(--warning-bg);
  --status-ready: var(--success);
  --status-ready-bg: var(--success-bg);
  --status-completed: var(--text-3);
  --status-completed-bg: var(--surface-2);
  --status-cancelled: var(--danger);
  --status-cancelled-bg: var(--danger-bg);
}

/* --- Harmonisation Auditali : halo (thème sombre, sans quadrillage) ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body {
    background-image:
      radial-gradient(circle at 15% -10%, rgba(79,141,255,.24), transparent 45%),
      radial-gradient(circle at 85% 15%, rgba(139,92,246,.2), transparent 45%);
    background-attachment: fixed;
  }
}
:root[data-theme="dark"] body {
  background-image:
    radial-gradient(circle at 15% -10%, rgba(79,141,255,.24), transparent 45%),
    radial-gradient(circle at 85% 15%, rgba(139,92,246,.2), transparent 45%);
  background-attachment: fixed;
}