/* ==========================================================================
   Theme Orbit — design tokens
   Values derived from the approved "Orbit ERP" mockup's design system
   (ThemeComponents.html / SampleTemplate.html).
   --o-c1 / --o-c1-light / --o-c1-dark and --o-c2 / --o-c2-light /
   --o-c2-dark are overridden at runtime by a small inline <style> block
   (see theme_orbit_helper.php) driven by the Setup > Theme Orbit color
   pickers — the values below are just the shipped defaults. Brand
   colors are NOT redefined per light/dark mode below — verified
   against the mockup source, --c1/--c2 are defined once in :root and
   stay identical in both themes there; only surfaces/text/borders/
   shadows change.
   ========================================================================== */
:root{
  --o-bg-base:#F0EDF3;
  --o-bg-elevated:#F6F5F9;
  --o-surface:#FFFFFF;
  --o-surface-2:#EDEBF3;

  --o-c1:#3D6BFF;
  --o-c1-light:#6E8CFF;
  --o-c1-dark:#2748C4;
  --o-c2:#FFB020;
  --o-c2-light:#FFC85C;
  --o-c2-dark:#C77E00;

  --o-success:#2ECC8F;
  --o-danger:#FF5470;
  --o-warn:#FFB020;
  --o-info:#3D6BFF;

  --o-text-hi:#181722;
  --o-text-mid:#6B6A78;
  --o-text-low:#9A98A6;

  --o-border:rgba(20,20,40,0.07);
  /* Card/surface borders (--o-border, 7% opacity) are deliberately subtle —
     fine for large panel edges, but too faint for small interactive
     controls (checkboxes, inputs, dropdown triggers, pagination) where
     the user needs to clearly see the control's boundary. Use this
     stronger token for those instead — same reasoning as theme_v1. */
  --o-border-strong:rgba(20,20,40,0.16);

  --o-radius-lg:22px;
  --o-radius-md:16px;
  --o-radius-sm:10px;

  /* Matches SampleTemplate.html's own combined tight+ambient shadow
     structure (inset highlight + crisp near shadow + big soft far
     shadow) — an earlier version here used a tighter, lower-spread
     approximation that read as noticeably flatter on screen. */
  --o-shadow-card: 0 1px 0 rgba(255,255,255,.9) inset, 0 2px 8px rgba(40,30,60,.07), 0 20px 40px -20px rgba(40,30,60,.20);
  --o-shadow-soft: 0 1px 0 rgba(255,255,255,.9) inset, 0 4px 12px rgba(40,30,60,.08), 0 28px 52px -20px rgba(40,30,60,.28);

  --o-font-display:'Space Grotesk','Inter',system-ui,sans-serif;
  --o-font-body:'Inter',system-ui,sans-serif;

  /* Sidebar/menu-only tokens — independent of the tokens above so the
     sidebar can be recolored without changing the rest of the theme.
     Default here matches the light shell; overridable the same way
     theme_v1 does it, should a Menu Style feature be added later. */
  --o-menu-bg:var(--o-bg-base);
  --o-menu-text:var(--o-text-mid);
  --o-menu-active-bg:var(--o-surface);
  --o-menu-active-text:var(--o-text-hi);
}

/* ==========================================================================
   Dark mode — values copied directly from ThemeComponents.html's own
   [data-theme="dark"] block (that file defaults to dark, so these ARE
   its shipped default values, not a derived guess), mapped onto this
   module's --o-* naming:
     --bg → --o-bg-base, --bg-elev-1 → --o-bg-elevated,
     --bg-elev-2 → --o-surface, --bg-elev-3 → --o-surface-2
   (--bg-elev-4 has no equivalent here — this module only ever built 4
   surface tiers, and nothing in theme.css references a 5th, so it's
   not a real gap). Shadow tokens keep this file's existing layered
   structure (inset highlight + near + far) but substitute the
   opacities from the mockup's own dark --highlight-top/--shadow-tight/
   --shadow-ambient tokens instead of the light-mode ones.
   ========================================================================== */
[data-theme="dark"]{
  --o-bg-base:#0A0E17;
  --o-bg-elevated:#10151F;
  --o-surface:#151B29;
  --o-surface-2:#1C2436;

  --o-text-hi:#EDF0F7;
  --o-text-mid:#8C94A8;
  --o-text-low:#565F74;

  --o-border:rgba(255,255,255,.07);
  --o-border-strong:rgba(255,255,255,.14);

  --o-shadow-card: 0 1px 0 rgba(255,255,255,.05) inset, 0 2px 8px rgba(0,0,0,.35), 0 20px 40px -20px rgba(0,0,0,.65);
  --o-shadow-soft: 0 1px 0 rgba(255,255,255,.05) inset, 0 4px 12px rgba(0,0,0,.35), 0 28px 52px -20px rgba(0,0,0,.65);
}