/* ============================================================================
   LogiCenter – design tokens (colours, radii, shadows, fonts, sizes)
   ============================================================================
   Every stylesheet in the app reads these CSS custom properties, so changing a
   value here re-themes the whole product.

   Light / dark theme – modern CSS technique: `light-dark()`
   ---------------------------------------------------------
   Each colour is written once as   light-dark(<light value>, <dark value>).
   The browser picks the half that matches the element's `color-scheme`:

     :root                     color-scheme: light dark  → follows the OS setting
     :root[data-theme=light]   color-scheme: light       → user picked light (header toggle)
     :root[data-theme=dark]    color-scheme: dark        → user picked dark

   `color-scheme` also makes native controls (scrollbars, date pickers,
   checkboxes) match the theme. The toggle lives in src/shared/utils/theme.js.

   Loaded first, inside the `tokens` cascade layer (layer order: index.html).
   ========================================================================== */
@layer tokens {
  :root {
    color-scheme: light dark;

    /* --- Brand & status colours ----------------------------------------- */
    --c-primary: #0b5cd5;                                  /* main blue: buttons, links, focus */
    --c-primary-600: #0a4fb8;                              /* hover / pressed blue */
    --c-primary-50: light-dark(#e8f0fd, #13254a);          /* tinted background for info */
    --c-accent: #ffb020;                                   /* highlights in 3D scenes */
    --c-success: #16a34a;
    --c-success-50: light-dark(#e7f6ec, #0f2a1c);
    --c-warning: #d97706;
    --c-warning-50: light-dark(#fdf3e2, #2c1f0b);
    --c-danger: #dc2626;
    --c-danger-50: light-dark(#fdecec, #2d1215);
    --c-info: #0284c7;

    /* --- Surfaces & text ------------------------------------------------- */
    --c-bg: light-dark(#f3f5f9, #0b1220);                  /* page background */
    --c-surface: light-dark(#ffffff, #111a2e);             /* cards, header, modals */
    --c-surface-2: light-dark(#f8fafc, #0f1729);           /* table heads, subtle fills */
    --c-border: light-dark(#e2e8f0, #1f2a44);
    --c-text: light-dark(#0f172a, #e2e8f0);                /* main text */
    --c-text-2: light-dark(#475569, #a5b4cc);              /* secondary text, labels */
    --c-text-3: light-dark(#94a3b8, #64748b);              /* hints, placeholders */

    /* --- Sidebar (always dark, slightly darker in dark mode) ------------ */
    --c-nav-bg: light-dark(#0b1220, #070c17);
    --c-nav-text: #cbd5e1;
    --c-nav-active: light-dark(#1e293b, #16213a);

    /* --- 3D scenes ------------------------------------------------------- */
    --c-scene-bg: #0f172a;

    /* --- Shape & depth --------------------------------------------------- */
    --radius-sm: 6px;
    --radius: 10px;
    --radius-lg: 16px;
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
    --shadow: 0 4px 14px rgba(15, 23, 42, .08);
    --shadow-lg: 0 18px 40px rgba(15, 23, 42, .18);

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

    /* --- Layout & motion ------------------------------------------------- */
    --sidebar-w: 232px;
    --header-h: 56px;
    --ease: cubic-bezier(.2, .8, .2, 1);                   /* springy ease-out used everywhere */
  }

  /* Explicit choice from the theme toggle overrides the OS preference. */
  :root[data-theme="light"] { color-scheme: light; }
  :root[data-theme="dark"]  { color-scheme: dark; }
}