/* ============================================================
   tokens.css — Design Tokens for EcomOS
   Single source of truth for all CSS custom properties.
   ============================================================ */

:root {
  /* Left gutter of the content shell. Exposed so a section that should read as
     part of the sidebar (Settings) can cancel it precisely. */
  --content-gutter: 24px;
  --font-display: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, sans-serif;
  /* Chat glass. Explicit tints rather than color-mix over --card: mixing a
     custom property into color-mix() did not reliably recompute when the theme
     flipped on elements that also carry backdrop-filter. */
  --chat-glass:         rgba(255,255,255,.84);
  --chat-glass-focus:   rgba(255,255,255,.97);
  --chat-rail:          rgba(255,255,255,.62);
  --chat-rail-solid:    rgba(255,255,255,.96);
  --chat-chip:          rgba(255,255,255,.72);
  --chat-bubble:        rgba(255,255,255,.80);
  --chat-bubble-user-text: #ffffff;
  --bg-glow:       #9db9ec;
  --bg-shade:      rgba(12,17,32,.12);
  /* Native widgets (select popups, scrollbars, date pickers, checkbox) follow this */
  color-scheme: light;

  /* ---- Surfaces ---- */
  --bg:            #F8F9FB;
  /* Sidebar is the OPPOSITE of the theme: dark sidebar on the light theme. */
  --sidebar:       #14161C;
  --sidebar-fg:    #F2F4F8;
  --sidebar-muted: #8A91A3;
  --sidebar-hover: rgba(255,255,255,.07);
  --card:          #FFFFFF;
  --elev:          #F4F5F7;
  --elev2:         #F4F7F9;

  /* ---- Brand ----
     Accent is fixed to #5774b7 for every workspace. The companies table is not
     consulted for UI colour. */
  --primary:       #5774b7;
  --primary-dark:  #3f568a;
  --primary-soft:  #E7EDF9;
  --accent:        #5774b7;
  --accent-2:      #8b5cf6;
  --accent-3:      #2f9e8f;

  /* ---- Page gradient backdrop (light) ---- */
  --bg-grad-a:    #b7cdf4;
  --bg-grad-d:    #f4b9d1;
  --bg-grad-b:    #d3bdf3;
  --bg-grad-c:    #a9e0e7;

  /* ---- Text ---- */
  --text:          #2A2C3B;
  --label:         #3E3F4D;
  --muted:         #99A2B7;
  --icon:          #7C8797;

  /* ---- Borders ---- */
  --border:        #E3E7EF;

  /* ---- Semantic ---- */
  --success:       #16A34A;
  --success-dark:  #0F7A38;
  --success-soft:  #E3F6EA;
  --danger:        #EF4F57;
  --danger-soft:   #FDECEC;
  --info:          #3B82F6;
  --info-soft:     #E8F0FE;
  --warn:          #F5A524;
  --warn-soft:     #FFF4E0;
  --warn-text:     #B8760F;
  --purple:        #8B5CF6;
  --purple-soft:   #F1ECFE;
  --teal:          #0F766E;
  --teal-soft:     #E0F2F1;

  /* ---- Stronger line (inputs, checkboxes, dividers) ---- */
  --line:          #C9D0DA;

  /* ---- Tooltip / overlay surfaces ----
     Deliberately NOT derived from --text/--card: those invert in dark mode and
     would render a white tooltip on a dark UI. */
  --tt-bg:         #2A2C3B;
  --tt-fg:         #FFFFFF;
  --tt-muted:      rgba(255,255,255,.72);
  --tt-rule:       rgba(255,255,255,.16);
  /* Swatch colour for rows that carry a figure but no series of their own —
     "Share of total", "Order value". It was hardcoded to a translucent white in
     the markup, which is invisible against the light-theme tooltip surface.
     Kept on the tooltip's own scale so it tracks the surface in both themes. */
  --tt-muted-dot:  rgba(255,255,255,.42);
  --tt-shadow:     0 8px 24px rgba(15,17,23,.32);

  /* ---- Shadows ---- */
  --shadow:        0 1px 3px rgba(23,32,52,.05), 0 0 0 1px rgba(23,32,52,.025);
  --shadow-pop:    0 12px 32px rgba(23,32,52,.14), 0 0 0 1px rgba(23,32,52,.04);

  /* ---- Spacing scale ---- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;

  /* ---- Radii ---- */
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 10px;
  --r-xl: 14px;
  --r-pill: 999px;

  /* ---- Transitions ---- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 150ms;
  --dur-normal: 250ms;
  --dur-slow: 350ms;

  /* ---- Sidebar ---- */
  --sidebar-w: 220px;
  --sidebar-w-collapsed: 60px;

  /* ---- Skeleton ----
     Derived from --elev so they track the theme automatically. The shimmer
     highlight is a lighter tint of the base, never a hard-coded hex, or it
     stays near-white in dark mode. */
  --skel-base:   #EDEFF3;
  --skel-tint:   #F7F8FA;
  --skel-dur:    1250ms;
}

/* ---- Dark Mode ---- */
html[data-theme="dark"] {
  /* makes the native select/dropdown popup render dark instead of OS-white */
  color-scheme: dark;

  --bg:            #0f1117;
  --bg-glow:       #2e4d94;
  --bg-shade:      rgba(0,0,0,.5);
  /* Sidebar stays dark in both themes — a light sidebar in dark mode washed
     out the whole shell. */
  --sidebar:       #14161C;
  --sidebar-fg:    #F2F4F8;
  --sidebar-muted: #8A91A3;
  --sidebar-hover: rgba(255,255,255,.07);
  --card:          #1a1d26;
  --elev:          #1e2128;
  --elev2:         #1e2128;

  /* Dark page gradient — deep blue/purple/teal blooms, not flat black. */
  --bg-grad-a:     #1C2A52;
  --bg-grad-d:     #3B1B2E;
  --bg-grad-b:     #2C1A4E;
  --bg-grad-c:     #0E3140;

  /* Secondary text was too dim to read against the dark surfaces, so the
     muted/label/icon ramp is lifted for dark mode only. */
  --text:          #e9ebf2;
  --label:         #c2c8d6;
  --muted:         #949db1;
  --icon:          #a3abbd;
  --border:        #2e3340;
    /* Chat glass, dark. See the light values for why these are explicit. */
    --chat-glass:       rgba(26,29,38,.78);
    --chat-glass-focus: rgba(26,29,38,.94);
    --chat-rail:        rgba(26,29,38,.55);
    --chat-rail-solid:  rgba(26,29,38,.92);
    --chat-chip:        rgba(26,29,38,.72);
    --chat-bubble:      rgba(26,29,38,.72);
    /* Primary-coloured surfaces take light ink in dark mode; white on a mid
       indigo is close to unreadable. */
    --chat-bubble-user-text: #10131a;

  --primary-soft:  rgba(87,116,183,.16);
  --primary-dark:  #7d97d6;
  --success-soft:  rgba(22,163,74,.18);
  --success-dark:  #5DD48A;
  --success:       #34D399;
  --danger-soft:   rgba(239,68,68,.1);
  --info-soft:     rgba(59,130,246,.1);
  --warn-soft:     rgba(245,165,36,.1);
  --purple-soft:   rgba(139,92,246,.1);
  --teal-soft:     rgba(15,118,110,.14);

  --line:          #39404F;

  /* Dark tooltip stays dark: lighter than the card so it reads as elevated. */
  --tt-bg:         #2b303c;
  --tt-fg:         #f2f4f9;
  --tt-muted:      rgba(242,244,249,.7);
  --tt-rule:       rgba(255,255,255,.14);
  --tt-muted-dot:  rgba(242,244,249,.45);
  --tt-shadow:     0 8px 26px rgba(0,0,0,.5);

  --shadow:        0 1px 3px rgba(0,0,0,.2), 0 0 0 1px rgba(255,255,255,.04);

  --skel-base:     #1e222c;
  --skel-tint:     #2a2f3b;
  --shadow-pop:    0 12px 32px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.06);
}

/* Dark scrollbar */
html[data-theme="dark"] ::-webkit-scrollbar{width:6px;height:6px}
html[data-theme="dark"] ::-webkit-scrollbar-track{background:transparent}
html[data-theme="dark"] ::-webkit-scrollbar-thumb{background:#2a2e3a;border-radius:3px}
html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover{background:#3a3f4e}
html[data-theme="dark"] ::-webkit-scrollbar-corner{background:transparent}

/* ============================================================================
 * Per-section accent colours
 * Used by the collapsed sidebar, where the icon is the only label left, and by
 * the Settings sub-nav so a section keeps its colour across views.
 * ========================================================================= */
[data-tone="blue"]   { --tone-color: #3B82F6 }
[data-tone="indigo"] { --tone-color: #6366F1 }
[data-tone="violet"] { --tone-color: #8B5CF6 }
[data-tone="teal"]   { --tone-color: #14B8A6 }
[data-tone="amber"]  { --tone-color: #F59E0B }
[data-tone="green"]  { --tone-color: #22C55E }
[data-tone="orange"] { --tone-color: #F97316 }
[data-tone="rose"]   { --tone-color: #F43F5E }
[data-tone="red"]    { --tone-color: #EF4444 }
[data-tone="slate"]  { --tone-color: #64748B }