/*
Design System Tokens - Design System Overhaul (SPEC-026)
Token Architecture: Layer 1 (Primitives) → Layer 2 (Semantic) → Layer 3 (Component)
Source: specs/026-design-system-overhaul/data-model.md
*/

:root {
  /* =========================================================================
     LAYER 1: PRIMITIVE TOKENS (Raw Values)
     These are the lowest-level values, never used directly in components.
     ========================================================================= */

  /* === Color Primitives - Purple Scale (HSL values only) === */
  --color-purple-50: 270 100% 98%;
  --color-purple-100: 270 95% 93%;
  --color-purple-200: 270 90% 85%;
  --color-purple-300: 270 80% 75%;
  --color-purple-400: 270 70% 65%;
  --color-purple-500: 270 60% 55%;
  --color-purple-600: 270 55% 45%;
  --color-purple-700: 270 50% 35%;
  --color-purple-800: 270 45% 25%;
  --color-purple-900: 270 40% 15%;

  /* === Color Primitives - Gray Scale (HSL values only) === */
  --color-gray-50: 240 10% 98%;
  --color-gray-100: 240 10% 93%;
  --color-gray-200: 240 10% 85%;
  --color-gray-300: 240 10% 70%;
  --color-gray-400: 240 10% 55%;
  --color-gray-500: 240 10% 40%;
  --color-gray-600: 240 10% 30%;
  --color-gray-700: 240 12% 20%;
  --color-gray-800: 240 15% 12%;
  --color-gray-900: 240 15% 6%;
  --color-gray-950: 240 15% 4%;

  /* === Spacing Primitives - 4px base unit === */
  --space-px: 1px;
  --space-0: 0;
  --space-0-5: 0.125rem;  /* 2px */
  --space-1: 0.25rem;     /* 4px */
  --space-2: 0.5rem;      /* 8px */
  --space-3: 0.75rem;     /* 12px */
  --space-4: 1rem;        /* 16px */
  --space-5: 1.25rem;     /* 20px */
  --space-6: 1.5rem;      /* 24px */
  --space-8: 2rem;        /* 32px */
  --space-10: 2.5rem;     /* 40px */
  --space-12: 3rem;       /* 48px */
  --space-16: 4rem;       /* 64px */

  /* === Typography Primitives === */
  --font-display: 'Outfit', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;

  /* Legacy alias for compatibility */
  --font-sans: var(--font-body);

  --font-size-xs: 0.75rem;    /* 12px */
  --font-size-sm: 0.875rem;   /* 14px */
  --font-size-base: 1rem;     /* 16px */
  --font-size-md: 1rem;       /* 16px - alias */
  --font-size-lg: 1.125rem;   /* 18px */
  --font-size-xl: 1.25rem;    /* 20px */
  --font-size-2xl: 1.5rem;    /* 24px */
  --font-size-3xl: 1.875rem;  /* 30px */
  --font-size-4xl: 2.25rem;   /* 36px */

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;

  /* === Border Radius Primitives === */
  --radius-none: 0;
  --radius-sm: 0.375rem;   /* 6px */
  --radius-md: 0.5rem;     /* 8px */
  --radius-lg: 0.75rem;    /* 12px */
  --radius-xl: 1rem;       /* 16px */
  --radius-2xl: 1.5rem;    /* 24px */
  --radius-full: 9999px;

  /* === Shadow Primitives === */
  --shadow-sm: 0 1px 2px 0 hsl(var(--c-shadow) / 0.05);
  --shadow-md: 0 4px 6px -1px hsl(var(--c-shadow) / 0.1), 0 2px 4px -2px hsl(var(--c-shadow) / 0.1);
  --shadow-lg: 0 10px 15px -3px hsl(var(--c-shadow) / 0.1), 0 4px 6px -4px hsl(var(--c-shadow) / 0.1);
  --shadow-xl: 0 20px 25px -5px hsl(var(--c-shadow) / 0.1), 0 8px 10px -6px hsl(var(--c-shadow) / 0.1);
  --modal-shadow: 0 25px 50px -12px hsl(var(--c-shadow) / 0.25);

  /* === Animation Timing Primitives === */
  --duration-instant:  80ms;
  --duration-fast:    140ms;
  --duration-normal:  220ms;
  --duration-slow:    340ms;
  --duration-lazy:    480ms;

  /* Easing curves */
  --ease-out:        cubic-bezier(0.16, 1, 0.3, 1);   /* snappy decelerate */
  --ease-in-out:     cubic-bezier(0.4, 0, 0.2, 1);    /* material standard */
  --ease-spring:     cubic-bezier(0.34, 1.4, 0.64, 1); /* subtle overshoot */
  --ease-linear:     linear;

  /* === Glassmorphism Primitives === */
  --blur-sm: 4px;
  --blur-md: 8px;
  --blur-lg: 12px;
  --blur-xl: 16px;

  /* =========================================================================
     LAYER 2: SEMANTIC TOKENS (Theme-Aware)
     These map primitives to semantic meanings. Values change between themes.
     Dark theme is the default.
     ========================================================================= */

  /* === Surfaces (Dark theme default) === */
  --c-bg: var(--color-gray-950);           /* Page background */
  --c-surface: var(--color-gray-900);      /* Card background */
  --c-surface-2: var(--color-gray-800);    /* Elevated surface */
  --c-surface-3: var(--color-gray-700);    /* Highest elevation */
  --c-surface-glass: var(--color-gray-900);  /* Glassmorphism base */

  /* === Text === */
  --c-text: var(--color-gray-50);          /* Primary text */
  --c-text-muted: var(--color-gray-400);   /* Secondary text */
  --c-text-subtle: var(--color-gray-500);  /* Tertiary text */
  --c-text-inverse: var(--color-gray-900); /* Text on accent */

  /* === Borders === */
  --c-border: var(--color-gray-800);       /* Default border */
  --c-border-strong: var(--color-gray-700); /* Emphasized border */
  --c-border-subtle: var(--color-gray-800); /* Subtle border */
  --c-input-border: var(--color-gray-800); /* Input border (legacy alias) */

  /* === Brand Colors === */
  --c-primary: var(--color-purple-500);    /* Primary accent */
  --c-primary-hover: var(--color-purple-400);
  --c-primary-active: var(--color-purple-600);
  --c-primary-contrast: var(--color-gray-50);

  /* === Status Colors === */
  --c-success: 142 76% 45%;
  --c-warning: 38 92% 50%;
  --c-danger: 0 84% 60%;
  --c-info: 199 89% 48%;

  /* === Effects === */
  --c-glow: var(--color-purple-500);
  --c-shadow: 0 0% 0%;

  /* Legacy aliases for compatibility */
  --c-secondary: var(--c-surface-2);
  --c-secondary-contrast: var(--c-text);
  --c-accent: var(--c-primary);
  --c-accent-contrast: var(--c-primary-contrast);

  /* === Special colors (gradients, charts) === */
  --c-hero-dark: 240 20% 5%;
  --c-hero-dark-lighter: 240 15% 10%;
  --c-gradient-start: var(--color-purple-500);
  --c-gradient-end: var(--color-purple-400);
  --c-gold: 45 93% 55%;
  --c-purple: var(--color-purple-500);
  --c-green: 142 76% 45%;
  --c-chart-blue: 199 89% 48%;

  /* === Workspace grid === */
  --ws-grid-line: var(--color-gray-800);
  --ws-grid-line-strong: var(--color-gray-700);
  --ws-cell-bg: transparent;
  --ws-cell-hover: var(--color-gray-800);

  /* === Telerik component mappings === */
  --telerik-primary: var(--c-primary);
  --telerik-secondary: var(--c-secondary);
  --telerik-surface: var(--c-surface);
  --telerik-border: var(--c-border);

  /* =========================================================================
     LAYER 3: COMPONENT TOKENS
     These map semantic tokens to specific component properties.
     ========================================================================= */

  /* === Button Tokens === */
  --btn-bg: var(--c-primary);
  --btn-bg-hover: var(--c-primary-hover);
  --btn-text: var(--c-primary-contrast);
  --btn-border-radius: var(--radius-md);
  --btn-padding-x: var(--space-4);
  --btn-padding-y: var(--space-2);
  --btn-font-weight: var(--font-weight-medium);

  --btn-secondary-bg: transparent;
  --btn-secondary-border: var(--c-border-strong);
  --btn-secondary-text: var(--c-text);

  --btn-ghost-bg: transparent;
  --btn-ghost-text: var(--c-text-muted);
  --btn-ghost-hover-bg: var(--c-surface-2);

  /* === Card Tokens === */
  --card-bg: var(--c-surface);
  --card-bg-glass: var(--c-surface-glass);
  --card-border: var(--c-border);
  --card-border-radius: var(--radius-lg);
  --card-padding: var(--space-6);
  --card-blur: var(--blur-lg);

  /* === Input Tokens === */
  --input-bg: var(--c-surface);
  --input-border: var(--c-border);
  --input-border-focus: var(--c-primary);
  --input-border-radius: var(--radius-md);
  --input-padding-x: var(--space-3);
  --input-padding-y: var(--space-2);
  --input-glow: var(--c-glow);

  /* === Navigation Tokens === */
  --nav-width: 260px;
  --nav-width-collapsed: 72px;
  --nav-bg: var(--c-surface);
  --nav-item-padding: var(--space-3) var(--space-4);
  --nav-item-radius: var(--radius-md);
  --nav-item-active-bg: var(--c-primary);
  --nav-category-text: var(--c-text-subtle);

  /* === Modal Tokens === */
  --modal-bg: var(--c-surface);
  --modal-backdrop: var(--c-bg);
  --modal-backdrop-blur: var(--blur-md);
  --modal-border-radius: var(--radius-xl);
  --modal-padding: var(--space-6);
  --modal-animation-duration: var(--duration-normal);
}

/* =========================================================================
   GLOBAL KEYFRAMES
   Defined here so they are available to all stylesheets via cascade.
   ========================================================================= */

/* Page / section content entering the viewport.
   Translate-only: no opacity so there is zero chance of a visibility flash
   when the animation is restarted on enhanced navigation. */
@keyframes page-enter {
  from {
    transform: translateY(7px);
  }
  to {
    transform: translateY(0);
  }
}

/* Lightweight fade — for overlays, tooltips, backdrops */
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes fade-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

/* Dropdown / context-menu appearing beneath a trigger */
@keyframes dropdown-enter {
  from {
    opacity: 0;
    transform: translateY(-6px) scaleY(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scaleY(1);
  }
}

/* Popup appearing above a trigger */
@keyframes dropdown-enter-up {
  from {
    opacity: 0;
    transform: translateY(6px) scaleY(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scaleY(1);
  }
}

/* Modal / dialog appearing in the centre of the screen */
@keyframes modal-enter {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.96) translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1) translateY(0);
  }
}

/* Slide-in from the right (sidebar, drawers) */
@keyframes slide-in-right {
  from {
    opacity: 0;
    transform: translateX(12px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Inline alert / toast sliding in from left */
@keyframes alert-enter {
  from {
    opacity: 0;
    transform: translateX(-8px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Scale-pop used for badges, chips, small widgets */
@keyframes pop-in {
  0%   { opacity: 0; transform: scale(0.8);  }
  60%  { transform: scale(1.06); }
  100% { opacity: 1; transform: scale(1); }
}

/* =========================================================================
   BASE STYLES
   ========================================================================= */

/* Base typography */
body {
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: hsl(var(--c-bg));
  color: hsl(var(--c-text));
  line-height: var(--line-height-normal);
}

/* Headings use display font */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
}

/* Theme transition */
*,
*::before,
*::after {
  transition: background-color 150ms ease-out,
              border-color 150ms ease-out,
              color 150ms ease-out;
}

/* Disable transitions on initial load - class is removed by JS */
.no-transitions *,
.no-transitions *::before,
.no-transitions *::after {
  transition: none !important;
}

/* =========================================================================
   UTILITY CLASSES
   ========================================================================= */

/* Text gradient */
.text-gradient {
  background: linear-gradient(135deg, hsl(var(--c-gradient-start)) 0%, hsl(var(--c-gradient-end)) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Hero gradient */
.hero-gradient {
  background: linear-gradient(135deg, hsl(var(--c-hero-dark)) 0%, hsl(var(--c-hero-dark-lighter)) 100%);
}

/* Button gradient */
.btn-gradient {
  background: linear-gradient(135deg, hsl(var(--c-gradient-start)) 0%, hsl(var(--c-gradient-end)) 100%);
}

/* =========================================================================
   BUTTON COMPONENT CLASSES
   ========================================================================= */

.btn-primary {
  background: hsl(var(--btn-bg));
  color: hsl(var(--btn-text));
  border: none;
  border-radius: var(--btn-border-radius);
  padding: var(--btn-padding-y) var(--btn-padding-x);
  font-weight: var(--btn-font-weight);
  font-family: var(--font-body);
  cursor: pointer;
  transition: background 150ms ease-out, transform 150ms ease-out;
}

.btn-primary:hover {
  background: hsl(var(--btn-bg-hover));
}

.btn-primary:focus-visible {
  outline: 2px solid hsl(var(--c-primary));
  outline-offset: 2px;
}

.btn-primary:active {
  background: hsl(var(--c-primary-active));
  transform: scale(0.98);
}

.btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-secondary {
  background: var(--btn-secondary-bg);
  color: hsl(var(--btn-secondary-text));
  border: 1px solid hsl(var(--btn-secondary-border));
  border-radius: var(--btn-border-radius);
  padding: var(--btn-padding-y) var(--btn-padding-x);
  font-weight: var(--btn-font-weight);
  font-family: var(--font-body);
  cursor: pointer;
  transition: background 150ms ease-out, border-color 150ms ease-out;
}

.btn-secondary:hover {
  background: hsl(var(--c-surface-2));
  border-color: hsl(var(--c-border-strong));
}

.btn-secondary:focus-visible {
  outline: 2px solid hsl(var(--c-primary));
  outline-offset: 2px;
}

.btn-ghost {
  background: var(--btn-ghost-bg);
  color: hsl(var(--btn-ghost-text));
  border: none;
  border-radius: var(--btn-border-radius);
  padding: var(--btn-padding-y) var(--btn-padding-x);
  font-weight: var(--btn-font-weight);
  font-family: var(--font-body);
  cursor: pointer;
  transition: background 150ms ease-out, color 150ms ease-out;
}

.btn-ghost:hover {
  background: hsl(var(--btn-ghost-hover-bg));
  color: hsl(var(--c-text));
}

.btn-ghost:focus-visible {
  outline: 2px solid hsl(var(--c-primary));
  outline-offset: 2px;
}

.btn-danger {
  background: hsl(var(--c-danger));
  color: white;
  border: none;
  border-radius: var(--btn-border-radius);
  padding: var(--btn-padding-y) var(--btn-padding-x);
  font-weight: var(--btn-font-weight);
  font-family: var(--font-body);
  cursor: pointer;
  transition: background 150ms ease-out, transform 150ms ease-out;
}

.btn-danger:hover {
  background: hsl(0 84% 50%);
}

.btn-danger:focus-visible {
  outline: 2px solid hsl(var(--c-danger));
  outline-offset: 2px;
}

/* =========================================================================
   CARD COMPONENT CLASSES
   ========================================================================= */

.card {
  background: hsl(var(--card-bg));
  border: 1px solid hsl(var(--card-border));
  border-radius: var(--card-border-radius);
  padding: var(--card-padding);
}

/* Glass variant (dark mode optimized) */
.card-glass {
  background: hsl(var(--card-bg-glass) / 0.8);
  border: 1px solid hsl(var(--card-border) / 0.5);
}

@supports (backdrop-filter: blur(1px)) {
  .card-glass {
    backdrop-filter: blur(var(--card-blur));
  }
}

/* Interactive card with hover effects - .card.card-interactive for specificity over .card in pages.css */
.card.card-interactive {
  position: relative;
  cursor: pointer;
  transition: transform 200ms ease-out, box-shadow 200ms ease-out, border-color 200ms ease-out;
}

.card.card-interactive::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(
    135deg,
    hsl(var(--c-primary)) 0%,
    hsl(var(--c-primary) / 0) 50%
  );
  opacity: 0;
  transition: opacity 200ms ease-out;
  z-index: -1;
  pointer-events: none;
}

.card.card-interactive:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
  border-color: hsl(var(--c-primary) / 0.3);
}

.card.card-interactive:hover::before {
  opacity: 1;
}

/* Fallback for no backdrop-filter support */
@supports not (backdrop-filter: blur(1px)) {
  .card-glass {
    background: hsl(var(--card-bg));
  }
}

/* =========================================================================
   INPUT COMPONENT CLASSES
   ========================================================================= */

.input {
  background: hsl(var(--input-bg));
  border: 1px solid hsl(var(--input-border));
  border-radius: var(--input-border-radius);
  padding: var(--input-padding-y) var(--input-padding-x);
  color: hsl(var(--c-text));
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  transition: border-color 150ms ease-out, box-shadow 150ms ease-out;
}

.input::placeholder {
  color: hsl(var(--c-text-muted));
}

.input:focus {
  border-color: hsl(var(--input-border-focus));
  box-shadow: 0 0 0 3px hsl(var(--input-glow) / 0.4);
  outline: none;
}

/* Validation states */
.input-error {
  border-color: hsl(var(--c-danger)) !important;
}

.input-error:focus {
  box-shadow: 0 0 0 3px hsl(var(--c-danger) / 0.3);
}

.input-success {
  border-color: hsl(var(--c-success)) !important;
}

.input-success:focus {
  box-shadow: 0 0 0 3px hsl(var(--c-success) / 0.3);
}

.input-warning {
  border-color: hsl(var(--c-warning)) !important;
}

.input-warning:focus {
  box-shadow: 0 0 0 3px hsl(var(--c-warning) / 0.3);
}

/* =========================================================================
   MODAL COMPONENT CLASSES
   ========================================================================= */

.modal {
  background: hsl(var(--modal-bg));
  border: 1px solid hsl(var(--c-border));
  border-radius: var(--modal-border-radius);
  padding: 0;
  max-width: 500px;
  width: 90vw;
  box-shadow: var(--modal-shadow);
}

.modal::backdrop {
  background: hsl(var(--modal-backdrop) / 0.8);
}

@supports (backdrop-filter: blur(1px)) {
  .modal::backdrop {
    backdrop-filter: blur(var(--modal-backdrop-blur));
  }
}

.modal[open] {
  animation: modal-in var(--modal-animation-duration) var(--ease-out) both;
}

@keyframes modal-in {
  from {
    opacity: 0;
    transform: scale(0.96) translateY(-6px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--modal-padding);
  border-bottom: 1px solid hsl(var(--c-border));
}

.modal-header h2 {
  margin: 0;
  font-size: var(--font-size-lg);
}

.modal-close {
  background: transparent;
  border: none;
  color: hsl(var(--c-text-muted));
  font-size: var(--font-size-xl);
  cursor: pointer;
  padding: var(--space-1);
  border-radius: var(--radius-sm);
  transition: color 150ms ease-out, background 150ms ease-out;
}

.modal-close:hover {
  color: hsl(var(--c-text));
  background: hsl(var(--c-surface-2));
}

.modal-body {
  padding: var(--modal-padding);
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  padding: var(--modal-padding);
  border-top: 1px solid hsl(var(--c-border));
}

/* =========================================================================
   FOCUS VISIBLE FOR ACCESSIBILITY
   ========================================================================= */

:focus-visible {
  outline: 2px solid hsl(var(--c-primary));
  outline-offset: 2px;
}

/* =========================================================================
   REDUCED MOTION SUPPORT
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}