/*!
 * Osool — design tokens
 * One neutral ramp (nine steps), remapped (not inverted) for dark mode.
 * One small fixed data-colour set for charts and financial deltas.
 * Spacing / radius / motion primitives.
 *
 * These are plain CSS custom properties on :root so Bootstrap 5.3's own
 * --bs-* variables can be overridden from here (see osool.css) rather than
 * fighting Bootstrap's cascade. Plan ref: docs/osool-wireframes-plan.md §3.2–3.3
 */

:root {
  /* ---- neutral ramp — light (default) -------------------------------- */
  --n-0:   #ffffff; /* page ground, raised surfaces  */
  --n-25:  #fafafa; /* app background                */
  --n-50:  #f4f4f5; /* sunken wells, table stripe    */
  --n-100: #e8e8ea; /* hairlines, dividers           */
  --n-200: #d3d3d7; /* strong borders, disabled text */
  --n-400: #9a9aa1; /* faint text, axis labels       */
  --n-600: #6b6b73; /* muted text, secondary labels  */
  --n-800: #2e2e33; /* body text                     */
  --n-900: #141417; /* headings, ink, active states  */

  /* ---- rgb triplets for the ramp steps Bootstrap's own utilities need in
     "r,g,b" form (its opacity-aware utilities — .text-body, .text-muted,
     .bg-*, .border-* with -subtle variants — read `rgba(var(--bs-*-rgb),
     var(--bs-*-opacity))`, not the hex custom property). Kept in lock-step
     with the hex values above in every theme block below; osool.css maps
     these onto the matching --bs-*-rgb variables. --------------------- */
  --n-0-rgb:   255, 255, 255;
  --n-25-rgb:  250, 250, 250;
  --n-50-rgb:  244, 244, 245;
  --n-600-rgb: 107, 107, 115;
  --n-800-rgb: 46, 46, 51;
  --n-900-rgb: 20, 20, 23;

  /* ---- data colour — muted, desaturated, fixed series order ---------- */
  --c-1: #1f6f8b; /* primary series — teal-blue */
  --c-2: #d08b3c; /* amber                      */
  --c-3: #4a7c59; /* green                      */
  --c-4: #8b5e83; /* plum                       */
  --c-5: #7c8794; /* slate                      */
  --c-6: #a8503f; /* brick                      */
  --pos: #2f7d4f; /* positive delta             */
  --neg: #b3453a; /* negative delta             */

  /* ---- spacing — 4px base unit ---------------------------------------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-12: 48px;
  --sp-16: 64px;

  /* ---- shape ------------------------------------------------------------ */
  --radius-control: 4px;
  --radius-container: 8px;
  --radius-pill: 999px;

  /* ---- elevation — borders, not shadows. exactly one shadow exists ---- */
  --border-hairline: 1px solid var(--n-100);
  --border-strong: 1px solid var(--n-200);
  --shadow-overlay: 0 8px 24px -8px rgb(20 20 23 / 0.24), 0 2px 8px -2px rgb(20 20 23 / 0.12);

  /* ---- motion — every transition reads this, prefers-reduced-motion
     collapses it to effectively-instant in one place (§9.1) -------------- */
  --dur-fast: 150ms;
  --dur-base: 240ms;
  --dur-slow: 420ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* ---- type sizing tokens, see osool.css for role application (§3.4) -- */
  --font-latin: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-arabic: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif;
}

/* Explicit theme choice wins over system preference in both directions.
   Written as two plain (non-nested) rules rather than CSS nesting so this
   works without relying on the newer nesting spec. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --n-0:   #17181b;
    --n-25:  #121316;
    --n-50:  #1d1f23;
    --n-100: #2a2c31;
    --n-200: #3a3d44;
    --n-400: #7a7e87;
    --n-600: #a2a6ae;
    --n-800: #e2e3e6;
    --n-900: #f6f7f8;
    --n-0-rgb:   23, 24, 27;
    --n-25-rgb:  18, 19, 22;
    --n-50-rgb:  29, 31, 35;
    --n-600-rgb: 162, 166, 174;
    --n-800-rgb: 226, 227, 230;
    --n-900-rgb: 246, 247, 248;
    --shadow-overlay: 0 8px 24px -8px rgb(0 0 0 / 0.6), 0 2px 8px -2px rgb(0 0 0 / 0.4);
  }
}

:root[data-theme="dark"] {
  --n-0:   #17181b;
  --n-25:  #121316;
  --n-50:  #1d1f23;
  --n-100: #2a2c31;
  --n-200: #3a3d44;
  --n-400: #7a7e87;
  --n-600: #a2a6ae;
  --n-800: #e2e3e6;
  --n-900: #f6f7f8;
  --n-0-rgb:   23, 24, 27;
  --n-25-rgb:  18, 19, 22;
  --n-50-rgb:  29, 31, 35;
  --n-600-rgb: 162, 166, 174;
  --n-800-rgb: 226, 227, 230;
  --n-900-rgb: 246, 247, 248;
  --shadow-overlay: 0 8px 24px -8px rgb(0 0 0 / 0.6), 0 2px 8px -2px rgb(0 0 0 / 0.4);
}

/* Global reduced-motion switch — every transition/animation in osool.css
   and every ApexCharts config reads isReducedMotion() from motion.js, which
   mirrors this media query. (§9.1) */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0.01ms;
    --dur-base: 0.01ms;
    --dur-slow: 0.01ms;
  }
}