/* ==========================================================================
   TALIB Design Tokens — centralized colors, spacing, radius, shadows,
   typography, transitions, z-index.

   v2 (TALIB IT Service Desk mockup): the product's default look is now the
   LIGHT enterprise helpdesk theme — white cards on a cool grey canvas, a
   permanently dark navy sidebar, and a blue primary accent. The dark theme
   is retained as a user-toggleable alternative (talibToggleTheme), so both
   themes still share one token API; only values differ.
   ========================================================================== */

:root{
  /* Spacing scale */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 40px;
  --space-9: 56px; --space-10: 72px;

  /* Radius — tighter than v1 to match the mockup's denser enterprise feel */
  --radius-sm: 4px; --radius-md: 8px; --radius-lg: 10px; --radius-xl: 14px; --radius-pill: 999px;

  /* Typography */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --fs-page-title: 20px; --fs-section-title: 15px; --fs-card-title: 13.5px;
  --fs-body: 13px; --fs-meta: 12px; --fs-label: 11px; --fs-small: 11.5px;
  --lh-body: 1.5;

  /* Motion — Shopify-style: quick, slightly spring-y settle, never bouncy */
  --ease: cubic-bezier(.4,0,.2,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --t-fast: 120ms; --t-med: 200ms; --t-slow: 320ms;

  /* Blur / glass */
  --blur-md: 18px; --blur-lg: 28px;

  /* Elevation — layered shadows tuned for an actual "raised card" 3D
     feel rather than a flat rectangle with a faint blur under it: a
     crisp near shadow (contact), a soft far shadow (ambient, the thing
     that reads as "distance off the canvas"), and --shadow-inset-top
     (used in base.css alongside .surface's shadow) to fake a light
     source catching the card's top edge. */
  --shadow-1: 0 1px 2px rgba(16,24,40,.07), 0 3px 8px rgba(16,24,40,.06);
  --shadow-2: 0 2px 4px rgba(16,24,40,.07), 0 10px 24px rgba(16,24,40,.10);
  --shadow-3: 0 6px 12px rgba(16,24,40,.10), 0 22px 44px rgba(16,24,40,.14);
  --shadow-focus: 0 0 0 3px var(--accent-soft, rgba(82,82,91,.18));
  /* The inset highlight along a card's top edge — the actual "this is a
     raised physical panel, not a flat rectangle" cue. Kept as its own
     token (rather than baked into --shadow-1) because it's a LIGHT
     value in both themes (the highlight catches light regardless of
     whether the surrounding shadow is light-grey or near-black). */
  --shadow-inset-top: inset 0 1px 0 rgba(255,255,255,.75);

  /* Z-index */
  --z-topbar: 50; --z-sidebar: 40; --z-drawer: 80; --z-modal: 100; --z-palette: 110; --z-toast: 120;

  /* Content column — the mockup runs its dashboards edge-to-edge with
     generous internal grids rather than a narrow centered column,
     so the working area is wider and denser than the old 1440px cap. */
  --content-max-width: 1680px;

  /* --------------------------------------------------------------------
     Sidebar — deliberately theme-INDEPENDENT. In the mockup the left rail
     is dark navy on every screen, including the light ones, so these are
     declared once here and NOT overridden per theme.
     -------------------------------------------------------------------- */
  --sidebar-bg: #27272a;
  --sidebar-bg-deep: #18181b;
  --sidebar-text: #b4b4b8;
  --sidebar-text-strong: #ffffff;
  --sidebar-hover: rgba(255,255,255,0.07);
  --sidebar-active-bg: #52525b;
  --sidebar-border: rgba(255,255,255,0.09);
  --sidebar-width: 216px;
}

/* ---------------- Light theme (DEFAULT — matches the mockup) ------------- */
:root, [data-theme="light"]{
  --bg-canvas: #f4f4f5;
  --bg-elevated: #ffffff;
  --bg-elevated-2: #f7f7f8;
  --bg-glass: #ffffff;
  --bg-glass-strong: #ffffff;
  --border-subtle: #e4e4e7;
  --border-glass: #dcdce0;
  --text-primary: #18181b;
  --text-secondary: #52525b;
  --text-tertiary: #71717a;
  --accent: #52525b;
  --accent-strong: #3f3f46;
  --accent-soft: #e4e4e7;
  --shadow-elevated: 0 1px 2px rgba(16,24,40,0.05), 0 4px 12px rgba(16,24,40,0.05);
  --shadow-glass: 0 4px 16px rgba(16,24,40,0.08);
  --row-hover: #f4f4f6;
  --scrollbar: #d4d4d8;

  /* Status — solid foreground colours */
  --status-success: #4c9a6a;
  --status-warning: #c1893f;
  --status-critical: #c0574c;
  --status-info: #71717a;
  --status-neutral: #9ca3af;

  /* Status — tinted badge/pill backgrounds */
  --tint-success: #e8f2ec;
  --tint-warning: #f7eede;
  --tint-critical: #f6e8e6;
  --tint-info: #ececee;
  --tint-neutral: #eef0f2;
}

/* ---------------- Dark theme (opt-in via the topbar toggle) ------------- */
[data-theme="dark"]{
  --bg-canvas: #0b0d12;
  --bg-elevated: #12151c;
  --bg-elevated-2: #171b24;
  --bg-glass: rgba(23, 27, 36, 0.55);
  --bg-glass-strong: rgba(23, 27, 36, 0.92);
  --border-subtle: rgba(255,255,255,0.08);
  --border-glass: rgba(255,255,255,0.12);
  --text-primary: #eef0f4;
  --text-secondary: #a6adbb;
  --text-tertiary: #6b7280;
  --accent: #a1a1aa;
  --accent-strong: #d4d4d8;
  --accent-soft: rgba(161,161,170,0.18);
  --shadow-elevated: 0 8px 30px rgba(0,0,0,0.35);
  --shadow-glass: 0 8px 32px rgba(0,0,0,0.45);
  --shadow-1: 0 1px 2px rgba(0,0,0,.5), 0 3px 10px rgba(0,0,0,.35);
  --shadow-2: 0 3px 6px rgba(0,0,0,.5), 0 12px 28px rgba(0,0,0,.4);
  --shadow-3: 0 8px 16px rgba(0,0,0,.55), 0 26px 52px rgba(0,0,0,.5);
  /* Dark cards sit on a near-black canvas, so the "light catching the
     top edge" cue is a faint white hairline rather than the bright
     highlight the light theme uses — subtle enough not to look like a
     stray border. */
  --shadow-inset-top: inset 0 1px 0 rgba(255,255,255,.06);
  --row-hover: rgba(255,255,255,0.04);
  --scrollbar: rgba(255,255,255,0.15);

  --status-success: #34d399;
  --status-warning: #fbbf24;
  --status-critical: #f87171;
  --status-info: #a1a1aa;
  --status-neutral: #94a3b8;

  --tint-success: rgba(52,211,153,0.15);
  --tint-warning: rgba(251,191,36,0.15);
  --tint-critical: rgba(248,113,113,0.15);
  --tint-info: rgba(96,165,250,0.15);
  --tint-neutral: rgba(148,163,184,0.15);
}