/* ==========================================================================
   Design Tokens & Theme Variables - Tickets Management System (SaaS)
   ========================================================================== */

:root {
  /* Canvas & Mesh Background */
  --bg-canvas: #f8fafc;
  --bg-gradient: radial-gradient(circle at 10% 10%, #eef2ff 0%, transparent 45%),
                 radial-gradient(circle at 90% 20%, #f3e8ff 0%, transparent 40%),
                 radial-gradient(circle at 50% 100%, #e0f2fe 0%, transparent 50%),
                 #f8fafc;

  /* Typography & Ink (WCAG AA Compliant High Contrast) */
  --ink: #0f172a;           /* Slate 900 */
  --ink-secondary: #334155; /* Slate 700 */
  --muted: #475569;         /* Slate 600 - minimum 4.5:1 on light */
  --muted-light: #64748b;   /* Slate 500 */
  --line: #e2e8f0;          /* Slate 200 */
  --line-strong: #cbd5e1;   /* Slate 300 */

  /* Brand Palette */
  --primary: #4f46e5;       /* Indigo 600 */
  --primary-hover: #4338ca; /* Indigo 700 */
  --primary-tint: #eef2ff;  /* Indigo 50 */
  --accent: #7c3aed;        /* Violet 600 */
  --accent-tint: #f5f3ff;   /* Violet 50 */
  --accent-cyan: #0891b2;   /* Cyan 600 */

  /* Semantic Feedback */
  --success: #16a34a;       /* Green 600 */
  --success-tint: #f0fdf4;  /* Green 50 */
  --success-border: #bbf7d0;
  --warning: #d97706;       /* Amber 600 */
  --warning-tint: #fffbeb;  /* Amber 50 */
  --warning-border: #fde68a;
  --danger: #dc2626;        /* Red 600 */
  --danger-hover: #b91c1c;
  --danger-tint: #fef2f2;   /* Red 50 */
  --danger-border: #fecaca;

  /* Surface Hierarchy (Refined Glassmorphism) */
  --glass-bg: rgba(255, 255, 255, 0.72);
  --glass-bg-strong: rgba(255, 255, 255, 0.88);
  --glass-border: rgba(255, 255, 255, 0.65);
  --glass-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);

  /* Content Surfaces (Solid/Semi-solid for high readability) */
  --surface-card: #ffffff;
  --surface-card-subtle: rgba(255, 255, 255, 0.92);
  --surface-card-hover: #ffffff;
  --surface-input: #ffffff;
  --surface-modal: #ffffff;
  --surface-dropdown: #ffffff;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06);
  --shadow-card: 0 4px 14px rgba(15, 23, 42, 0.06);
  --shadow-card-hover: 0 10px 25px rgba(15, 23, 42, 0.10);
  --shadow-modal: 0 20px 50px rgba(15, 23, 42, 0.16);

  /* Accessibility & Focus */
  --focus-ring: 0 0 0 3px rgba(79, 70, 229, 0.35);
  --focus-ring-danger: 0 0 0 3px rgba(220, 38, 38, 0.35);

  /* Border Radii */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --radius-full: 9999px;

  /* Priority Tokens */
  --priority-low-text: #15803d;
  --priority-low-bg: #dcfce7;
  --priority-med-text: #b45309;
  --priority-med-bg: #fef3c7;
  --priority-high-text: #b91c1c;
  --priority-high-bg: #fee2e2;

  /* Transitions */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Layout (sidebar collapse) */
  --sidebar-width: 270px;
  --sidebar-width-collapsed: 76px;

  /* Surfaces that need a theme-aware value beyond the tint tokens above */
  --column-bg: rgba(241, 245, 249, 0.7);
  --column-drag-bg: rgba(238, 242, 255, 0.9);
  --table-hover-bg: rgba(248, 250, 252, 0.7);
  --overlay-bg: rgba(15, 23, 42, 0.55);
}

/* Dark Mode Tokens (when data-theme="dark") */
[data-theme="dark"] {
  --bg-canvas: #090d16;
  --bg-gradient: radial-gradient(circle at 10% 10%, #1e1b4b 0%, transparent 45%),
                 radial-gradient(circle at 90% 20%, #2e1065 0%, transparent 40%),
                 radial-gradient(circle at 50% 100%, #082f49 0%, transparent 50%),
                 #090d16;

  --ink: #f8fafc;
  --ink-secondary: #cbd5e1;
  --muted: #94a3b8;
  --muted-light: #64748b;
  --line: rgba(255, 255, 255, 0.12);
  --line-strong: rgba(255, 255, 255, 0.20);

  --glass-bg: rgba(15, 23, 42, 0.75);
  --glass-bg-strong: rgba(15, 23, 42, 0.90);
  --glass-border: rgba(255, 255, 255, 0.14);
  --glass-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);

  --surface-card: #131c2e;
  --surface-card-subtle: #0f172a;
  --surface-card-hover: #1e293b;
  --surface-input: #131c2e;
  --surface-modal: #131c2e;
  --surface-dropdown: #131c2e;

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-card: 0 4px 14px rgba(0, 0, 0, 0.3);
  --shadow-card-hover: 0 10px 25px rgba(0, 0, 0, 0.45);
  --shadow-modal: 0 20px 50px rgba(0, 0, 0, 0.6);

  /* Semantic tints re-tuned for a dark canvas: subtle translucent fills +
     brighter foreground text, instead of light-mode's pastel backgrounds
     (a #dcfce7-style pastel chip looks like a washed-out hole on dark). */
  --primary-tint: rgba(129, 140, 248, 0.18);
  --accent-tint: rgba(167, 139, 250, 0.18);

  --success-tint: rgba(74, 222, 128, 0.14);
  --success-border: rgba(74, 222, 128, 0.32);
  --warning-tint: rgba(251, 191, 36, 0.16);
  --warning-border: rgba(251, 191, 36, 0.32);
  --danger-tint: rgba(248, 113, 113, 0.16);
  --danger-border: rgba(248, 113, 113, 0.32);

  --priority-low-bg: rgba(74, 222, 128, 0.16);
  --priority-low-text: #4ade80;
  --priority-med-bg: rgba(251, 191, 36, 0.18);
  --priority-med-text: #fbbf24;
  --priority-high-bg: rgba(248, 113, 113, 0.18);
  --priority-high-text: #f87171;

  --column-bg: rgba(255, 255, 255, 0.045);
  --column-drag-bg: rgba(129, 140, 248, 0.14);
  --table-hover-bg: rgba(255, 255, 255, 0.035);
  --overlay-bg: rgba(0, 0, 0, 0.65);
}