/* ============================================================================
   themes.css — Design tokens & theming
   ----------------------------------------------------------------------------
   Single source of truth for colours, surfaces, typography, radii, shadows and
   layout metrics. Everything visual in the template reads from these custom
   properties, so re-skinning the whole product means editing this one file.

   Layering model
   --------------
   1. :root .................. base tokens + LIGHT surfaces + DEFAULT (blue) accent
   2. [data-theme="dark"] .... overrides surfaces/text/border for dark mode
   3. [data-accent="…"] ...... overrides only the accent ramp (blue/green/purple/orange)

   Accent and theme are independent: any accent works in light or dark mode.
   ========================================================================== */

:root {
  /* ---- Accent ramp (default: Blue). Overridden by [data-accent]. ---------- */
  --primary-rgb: 79, 110, 247;                 /* drives rgba() shadows & soft fills */
  --primary: rgb(var(--primary-rgb));
  --primary-hover: #3f5de0;
  --primary-active: #354fc6;
  --primary-soft: rgba(var(--primary-rgb), 0.12);
  --primary-contrast: #ffffff;               /* text/icon colour on a primary fill */

  /* ---- Semantic status colours ------------------------------------------- */
  --secondary-color: #64748b;
  --success-rgb: 16, 185, 129;
  --success-color: rgb(var(--success-rgb));
  --danger-rgb: 239, 68, 68;
  --danger-color: rgb(var(--danger-rgb));
  --warning-rgb: 245, 158, 11;
  --warning-color: rgb(var(--warning-rgb));
  --info-rgb: 14, 165, 233;
  --info-color: rgb(var(--info-rgb));

  /* ---- Surfaces & text (LIGHT) ------------------------------------------- */
  --bg-color: #f6f7f9;          /* app canvas              */
  --card-bg: #ffffff;           /* cards, panels           */
  --card-bg-subtle: #fafbfc;    /* nested / muted surfaces */
  --sidebar-bg: #ffffff;        /* navigation rail         */
  --header-bg: rgba(255, 255, 255, 0.72); /* glass header  */
  --overlay-bg: rgba(15, 23, 42, 0.45);   /* drawer/modal scrim */

  --text-color: #0f172a;
  --text-strong: #020617;
  --text-muted: #667085;
  --text-faint: #98a2b3;
  --text-on-accent: var(--primary-contrast);

  /* ---- Borders & dividers ------------------------------------------------ */
  --border-color: #e9eaee;
  --border-strong: #d8dae0;
  --ring-color: rgba(var(--primary-rgb), 0.45); /* focus ring */

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

  /* ---- Shadows (soft, layered) ------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05);
  --shadow-md: 0 4px 16px -2px rgba(16, 24, 40, 0.08), 0 2px 4px -2px rgba(16, 24, 40, 0.04);
  --shadow-lg: 0 16px 40px -8px rgba(16, 24, 40, 0.16), 0 4px 8px -4px rgba(16, 24, 40, 0.06);
  --shadow-focus: 0 0 0 3px var(--ring-color);

  /* ---- Typography -------------------------------------------------------- */
  /* Swap --font-family for "Poppins", "Roboto", system-ui, … in one place.   */
  --font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --fs-xs: 0.75rem;
  --fs-sm: 0.8125rem;
  --fs-md: 0.875rem;
  --fs-lg: 1rem;
  --fs-xl: 1.25rem;
  --fs-2xl: 1.625rem;
  --fs-3xl: 2.125rem;

  /* ---- Layout metrics ---------------------------------------------------- */
  --sidebar-width: 280px;        /* expanded rail  */
  --sidebar-width-collapsed: 80px;
  --header-height: 64px;
  --content-max: 1440px;

  /* ---- Motion ------------------------------------------------------------ */
  --transition-fast: 120ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 320ms cubic-bezier(0.16, 1, 0.3, 1);

  /* ---- Stacking order ---------------------------------------------------- */
  --z-sidebar: 1040;
  --z-header: 1030;
  --z-overlay: 1045;
  --z-loader: 2000;

  color-scheme: light;
}

/* ============================================================================
   DARK MODE — only surfaces, text and borders change. Accent ramp is reused.
   ========================================================================== */
[data-theme="dark"] {
  --bg-color: #0b0d12;
  --card-bg: #14171f;
  --card-bg-subtle: #1a1e28;
  --sidebar-bg: #0e1117;
  --header-bg: rgba(14, 17, 23, 0.72);
  --overlay-bg: rgba(0, 0, 0, 0.6);

  --text-color: #e6e8ee;
  --text-strong: #f8fafc;
  --text-muted: #98a2b3;
  --text-faint: #667085;

  --border-color: #232733;
  --border-strong: #2e333f;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 16px -2px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 16px 48px -8px rgba(0, 0, 0, 0.6);

  color-scheme: dark;
}

/* ============================================================================
   ACCENT THEMES — change only the primary ramp. Stack with light OR dark.
   Apply on <html>: <html data-accent="green"> … </html>
   ========================================================================== */
[data-accent="blue"] {
  --primary-rgb: 201, 168, 76;
  --primary-hover: #B79644;
  --primary-active: #C9A84C;
}
[data-accent="green"] {
  --primary-rgb: 16, 185, 129;
  --primary-hover: #0ea372;
  --primary-active: #0b8a61;
}
[data-accent="purple"] {
  --primary-rgb: 139, 92, 246;
  --primary-hover: #7c44ef;
  --primary-active: #6d35e0;
}
[data-accent="orange"] {
  --primary-rgb: 249, 115, 22;
  --primary-hover: #ea640d;
  --primary-active: #d3560a;
}

/* Recompute derived accent tokens whenever the ramp changes. */
[data-accent] {
  --primary: rgb(var(--primary-rgb));
  --primary-soft: rgba(var(--primary-rgb), 0.12);
  --ring-color: rgba(var(--primary-rgb), 0.45);
}