/**
 * ActivGate Design Token System
 * ==============================
 * Single source of truth for all design values.
 *
 * Usage: Import this file FIRST in your CSS, then override as needed.
 *
 * Naming Convention:
 * --ag-{category}-{property}-{variant}
 *
 * Categories: color, space, font, radius, shadow, transition, z
 */

:root {
  /* ========================================
   * COLOR TOKENS
   * ======================================== */

  /* Brand Colors */
  --ag-color-brand-primary: #2E74B8;
  --ag-color-brand-primary-hover: #2563eb;
  --ag-color-brand-primary-active: #1d4ed8;
  --ag-color-brand-primary-soft: #E3EDF9;
  --ag-color-brand-primary-softer: rgba(46, 116, 184, 0.12);
  --ag-color-brand-primary-border: rgba(46, 116, 184, 0.28);

  --ag-color-brand-secondary: #1E284A;
  --ag-color-brand-secondary-soft: rgba(30, 40, 74, 0.18);

  --ag-color-brand-accent: #F1C9AE;
  --ag-color-brand-accent-strong: #E3C2B5;

  /* Gradients */
  --ag-gradient-brand: linear-gradient(135deg, #1E284A 0%, #2E74B8 55%, #F1C9AE 100%);
  --ag-gradient-brand-soft: linear-gradient(135deg, rgba(30,40,74,.18), rgba(46,116,184,.22), rgba(241,201,174,.22));
  --ag-gradient-button: linear-gradient(145deg, #2563eb, #4f46e5);

  /* Semantic Colors - Success */
  --ag-color-success: #059669;
  --ag-color-success-hover: #047857;
  --ag-color-success-soft: rgba(5, 150, 105, 0.08);
  --ag-color-success-softer: #f0fdf4;
  --ag-color-success-border: rgba(52, 211, 153, 0.7);
  --ag-color-success-border-soft: #bbf7d0;

  /* Semantic Colors - Warning */
  --ag-color-warning: #ea580c;
  --ag-color-warning-hover: #c2410c;
  --ag-color-warning-soft: rgba(234, 88, 12, 0.08);
  --ag-color-warning-softer: #fffbeb;
  --ag-color-warning-border: rgba(251, 146, 60, 0.7);
  --ag-color-warning-border-soft: #fde68a;
  --ag-color-warning-alt: #f4b45c;

  /* Semantic Colors - Error/Danger */
  --ag-color-error: #dc2626;
  --ag-color-error-hover: #b91c1c;
  --ag-color-error-soft: rgba(220, 38, 38, 0.08);
  --ag-color-error-softer: #fef2f2;
  --ag-color-error-border: rgba(248, 113, 113, 0.7);
  --ag-color-error-text: #F1594A;

  /* Semantic Colors - Info */
  --ag-color-info: #0f766e;
  --ag-color-info-soft: rgba(15, 118, 110, 0.08);
  --ag-color-info-border: rgba(45, 212, 191, 0.7);

  /* Text Colors */
  --ag-color-text-heading: #1E284A;
  --ag-color-text-body: #2A2A55;
  --ag-color-text-muted: #6B7491;
  --ag-color-text-subtle: #64748b;
  --ag-color-text-on-dark: #e5e7eb;
  --ag-color-text-on-primary: #ffffff;
  --ag-color-text-link: var(--ag-color-brand-primary);
  --ag-color-text-link-hover: var(--ag-color-brand-primary-hover);

  /* Background Colors */
  --ag-color-bg-page: #F6F7FB;
  --ag-color-bg-page-alt: #EEF2F8;
  --ag-color-bg-surface: #FFFFFF;
  --ag-color-bg-surface-alt: #F9FAFD;
  --ag-color-bg-surface-raised: #ffffff;
  --ag-color-bg-sidebar: #121933;
  --ag-color-bg-overlay: rgba(15, 23, 42, 0.5);
  --ag-color-bg-skeleton: linear-gradient(90deg, #eef1f6 0%, #f7f9fc 45%, #eef1f6 100%);

  /* Border Colors */
  --ag-color-border: #D9E1EE;
  --ag-color-border-strong: #CBD5E1;
  --ag-color-border-subtle: rgba(46, 116, 184, 0.12);
  --ag-color-border-focus: var(--ag-color-brand-primary);

  /* Interactive States */
  --ag-color-interactive-hover: rgba(46, 116, 184, 0.08);
  --ag-color-interactive-active: rgba(46, 116, 184, 0.12);
  --ag-color-interactive-selected: rgba(46, 116, 184, 0.18);

  /* Rating Colors */
  --ag-color-rating-fill: #f4b45c;
  --ag-color-rating-empty: #e5e7eb;

  /* ========================================
   * SPACING TOKENS
   * ======================================== */

  /* Base spacing scale (4px base unit) */
  --ag-space-0: 0;
  --ag-space-1: 4px;
  --ag-space-2: 8px;
  --ag-space-3: 12px;
  --ag-space-4: 16px;
  --ag-space-5: 20px;
  --ag-space-6: 24px;
  --ag-space-7: 28px;
  --ag-space-8: 32px;
  --ag-space-9: 36px;
  --ag-space-10: 40px;
  --ag-space-12: 48px;
  --ag-space-14: 56px;
  --ag-space-16: 64px;
  --ag-space-20: 80px;
  --ag-space-24: 96px;

  /* Semantic spacing aliases */
  --ag-space-xs: var(--ag-space-1);   /* 4px */
  --ag-space-sm: var(--ag-space-2);   /* 8px */
  --ag-space-md: var(--ag-space-3);   /* 12px */
  --ag-space-lg: var(--ag-space-4);   /* 16px */
  --ag-space-xl: var(--ag-space-6);   /* 24px */
  --ag-space-2xl: var(--ag-space-8);  /* 32px */
  --ag-space-3xl: var(--ag-space-12); /* 48px */

  /* Component-specific spacing */
  --ag-space-input-x: var(--ag-space-3);  /* 12px */
  --ag-space-input-y: var(--ag-space-2);  /* 8px */
  --ag-space-button-x: var(--ag-space-4); /* 16px */
  --ag-space-button-y: var(--ag-space-2); /* 8px */
  --ag-space-card: var(--ag-space-4);     /* 16px */
  --ag-space-section: var(--ag-space-8);  /* 32px */
  --ag-space-page: var(--ag-space-4);     /* 16px (inline) */

  /* Gap scale */
  --ag-gap-xs: var(--ag-space-1);   /* 4px */
  --ag-gap-sm: var(--ag-space-2);   /* 8px */
  --ag-gap-md: var(--ag-space-3);   /* 12px */
  --ag-gap-lg: var(--ag-space-4);   /* 16px */
  --ag-gap-xl: var(--ag-space-6);   /* 24px */

  /* ========================================
   * TYPOGRAPHY TOKENS
   * ======================================== */

  /* Font Families */
  --ag-font-sans: "Poppins", "Segoe UI", system-ui, -apple-system, sans-serif;
  --ag-font-serif: "Poppins", "Segoe UI", system-ui, -apple-system, sans-serif;
  --ag-font-mono: "JetBrains Mono", "Fira Code", Consolas, monospace;

  /* Font Sizes (reduced 5% from original) */
  --ag-font-size-xs: 10px;
  --ag-font-size-sm: 12px;
  --ag-font-size-base: 13px;
  --ag-font-size-md: 14px;
  --ag-font-size-lg: 15px;
  --ag-font-size-xl: 17px;
  --ag-font-size-2xl: 19px;
  --ag-font-size-3xl: 22px;
  --ag-font-size-4xl: 27px;
  --ag-font-size-5xl: 32px;

  /* Line Heights */
  --ag-line-height-tight: 1.15;
  --ag-line-height-snug: 1.25;
  --ag-line-height-normal: 1.5;
  --ag-line-height-relaxed: 1.6;
  --ag-line-height-loose: 1.75;

  /* Font Weights */
  --ag-font-weight-normal: 400;
  --ag-font-weight-medium: 500;
  --ag-font-weight-semibold: 600;
  --ag-font-weight-bold: 600;

  /* Letter Spacing */
  --ag-letter-spacing-tight: -0.01em;
  --ag-letter-spacing-normal: 0;
  --ag-letter-spacing-wide: 0.04em;

  /* ========================================
   * BORDER RADIUS TOKENS
   * ======================================== */

  --ag-radius-none: 0;
  --ag-radius-sm: 6px;
  --ag-radius-md: 8px;
  --ag-radius-lg: 10px;
  --ag-radius-xl: 12px;
  --ag-radius-2xl: 14px;
  --ag-radius-3xl: 16px;
  --ag-radius-4xl: 18px;
  --ag-radius-full: 999px;

  /* Component-specific radius */
  --ag-radius-button: var(--ag-radius-full);
  --ag-radius-button-rect: var(--ag-radius-xl);
  --ag-radius-input: var(--ag-radius-md);
  --ag-radius-card: var(--ag-radius-3xl);
  --ag-radius-modal: var(--ag-radius-3xl);
  --ag-radius-badge: var(--ag-radius-full);
  --ag-radius-avatar: var(--ag-radius-full);

  /* ========================================
   * SHADOW TOKENS
   * ======================================== */

  --ag-shadow-none: none;
  --ag-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
  --ag-shadow-sm: 0 4px 15px rgba(15, 23, 42, 0.06);
  --ag-shadow-md: 0 10px 22px rgba(24, 33, 51, 0.08);
  --ag-shadow-lg: 0 18px 36px rgba(18, 32, 38, 0.12);
  --ag-shadow-xl: 0 24px 50px rgba(15, 23, 42, 0.16);
  --ag-shadow-2xl: 0 30px 80px rgba(2, 8, 20, 0.35);

  /* Colored shadows */
  --ag-shadow-primary: 0 7px 20px rgba(37, 99, 235, 0.35);
  --ag-shadow-error: 0 7px 20px rgba(220, 38, 38, 0.25);
  --ag-shadow-success: 0 7px 20px rgba(5, 150, 105, 0.25);

  /* Focus shadows */
  --ag-shadow-focus: 0 0 0 4px rgba(46, 116, 184, 0.16);
  --ag-shadow-focus-error: 0 0 0 4px rgba(220, 38, 38, 0.16);

  /* Inset shadows */
  --ag-shadow-inset: inset 0 0 0 1px rgba(255, 255, 255, 0.3);

  /* ========================================
   * TRANSITION TOKENS
   * ======================================== */

  /* Durations */
  --ag-duration-instant: 0ms;
  --ag-duration-fast: 100ms;
  --ag-duration-normal: 150ms;
  --ag-duration-slow: 200ms;
  --ag-duration-slower: 250ms;
  --ag-duration-slowest: 300ms;

  /* Easings */
  --ag-ease-default: ease;
  --ag-ease-in: ease-in;
  --ag-ease-out: ease-out;
  --ag-ease-in-out: ease-in-out;
  --ag-ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);

  /* Common transitions */
  --ag-transition-fast: var(--ag-duration-fast) var(--ag-ease-default);
  --ag-transition-normal: var(--ag-duration-normal) var(--ag-ease-default);
  --ag-transition-slow: var(--ag-duration-slow) var(--ag-ease-default);

  /* Property-specific transitions */
  --ag-transition-colors: background-color var(--ag-transition-normal),
                          color var(--ag-transition-normal),
                          border-color var(--ag-transition-normal);
  --ag-transition-transform: transform var(--ag-transition-slow);
  --ag-transition-shadow: box-shadow var(--ag-transition-slow);
  --ag-transition-opacity: opacity var(--ag-transition-normal);
  --ag-transition-all: all var(--ag-transition-normal);

  /* ========================================
   * Z-INDEX TOKENS
   * ======================================== */

  --ag-z-below: -1;
  --ag-z-base: 0;
  --ag-z-raised: 1;
  --ag-z-dropdown: 10;
  --ag-z-sticky: 20;
  --ag-z-header: 50;
  --ag-z-overlay: 100;
  --ag-z-modal: 200;
  --ag-z-popover: 300;
  --ag-z-tooltip: 400;
  --ag-z-toast: 500;
  --ag-z-max: 9999;

  /* ========================================
   * LAYOUT TOKENS
   * ======================================== */

  /* Container widths */
  --ag-container-sm: 640px;
  --ag-container-md: 768px;
  --ag-container-lg: 1024px;
  --ag-container-xl: 1120px;
  --ag-container-2xl: 1280px;
  --ag-container-max: 1400px;

  /* Header */
  --ag-header-height: 64px;

  /* Sidebar */
  --ag-sidebar-width: 260px;
  --ag-sidebar-width-collapsed: 64px;

  /* Breakpoints (for reference - use in media queries) */
  /* --ag-breakpoint-sm: 640px */
  /* --ag-breakpoint-md: 768px */
  /* --ag-breakpoint-lg: 1024px */
  /* --ag-breakpoint-xl: 1280px */
  /* --ag-breakpoint-2xl: 1536px */

  /* ========================================
   * COMPONENT TOKENS
   * ======================================== */

  /* Buttons */
  --ag-button-height-sm: 32px;
  --ag-button-height-md: 38px;
  --ag-button-height-lg: 44px;
  --ag-button-min-width: 80px;

  /* Inputs */
  --ag-input-height-sm: 32px;
  --ag-input-height-md: 40px;
  --ag-input-height-lg: 48px;

  /* Cards */
  --ag-card-min-width: 240px;
  --ag-card-media-ratio: 4/3;
  --ag-card-media-height: 190px;

  /* Avatars */
  --ag-avatar-size-xs: 24px;
  --ag-avatar-size-sm: 32px;
  --ag-avatar-size-md: 40px;
  --ag-avatar-size-lg: 48px;
  --ag-avatar-size-xl: 64px;
  --ag-avatar-size-2xl: 96px;

  /* Badges */
  --ag-badge-height: 22px;
  --ag-badge-font-size: var(--ag-font-size-xs);

  /* Hit targets (accessibility) */
  --ag-hit-target-min: 44px;
  --ag-hit-target-compact: 36px;
}

/* ========================================
 * LEGACY TOKEN MAPPING
 * ======================================== */

/* Map old tokens to new tokens for backwards compatibility */
:root {
  /* Old main tokens → new tokens */
  --primary: var(--ag-color-brand-primary);
  --primary-strong: var(--ag-color-brand-secondary);
  --primary-soft: var(--ag-color-brand-primary-soft);
  --accent: var(--ag-color-brand-accent);
  --accent-strong: var(--ag-color-brand-accent-strong);
  --heading: var(--ag-color-text-heading);
  --text: var(--ag-color-text-body);
  --muted: var(--ag-color-text-muted);
  --bg: var(--ag-color-bg-page);
  --bg-soft: var(--ag-color-bg-page-alt);
  --surface: var(--ag-color-bg-surface);
  --surface-alt: var(--ag-color-bg-surface-alt);
  --line: var(--ag-color-border);
  --line2: var(--ag-color-border-strong);
  --radius: var(--ag-radius-3xl);
  --shadow: var(--ag-shadow-lg);
  --shadow-soft: var(--ag-shadow-md);
  --font-sans: var(--ag-font-sans);
  --font-serif: var(--ag-font-serif);
  --brand-gradient: var(--ag-gradient-brand);
  --brand-gradient-soft: var(--ag-gradient-brand-soft);
  --button-gradient: linear-gradient(145deg, var(--primary), var(--accent));
  --nav-link-color: var(--ag-color-text-heading);

  /* Old spacing tokens → new tokens */
  --space-1: var(--ag-space-2);   /* 6px → 8px (closest) */
  --space-2: var(--ag-space-3);   /* 10px → 12px (closest) */
  --space-3: var(--ag-space-4);   /* 16px → 16px */
  --space-4: var(--ag-space-6);   /* 24px → 24px */
  --space-5: var(--ag-space-8);   /* 32px → 32px */
  --space-6: var(--ag-space-12);  /* 48px → 48px */

  /* Old provider dashboard tokens → new tokens */
  --pg-bg: var(--ag-color-bg-page);
  --pg-ink: var(--ag-color-text-heading);
  --pg-text: var(--ag-color-text-body);
  --pg-muted: var(--ag-color-text-muted);
  --pg-border: var(--ag-color-border);
  --pg-border-subtle: var(--ag-color-border-strong);
  --pg-card-bg: var(--ag-color-bg-surface);
  --pg-accent: var(--ag-color-brand-primary);
  --pg-accent-soft: var(--ag-color-brand-primary-soft);
  --pg-good: var(--ag-color-success);
  --pg-warn: var(--ag-color-warning-alt);
  --pg-bad: var(--ag-color-error-text);
  --pg-info: var(--ag-color-text-heading);

  /* Old provider form tokens → new tokens */
  --ag-color-bg: var(--ag-color-bg-page);
  --ag-color-bg-panel: var(--ag-color-bg-surface);
  --ag-color-bg-sidebar: var(--ag-color-bg-sidebar);
  --ag-color-border: var(--ag-color-border);
  --ag-color-border-strong: var(--ag-color-border-strong);
  --ag-color-text: var(--ag-color-text-heading);
  --ag-color-text-muted: var(--ag-color-text-muted);
  --ag-color-text-on-dark: var(--ag-color-text-on-dark);
  --ag-color-primary: var(--ag-color-brand-primary);
  --ag-color-primary-soft: var(--ag-color-brand-primary-softer);
  --ag-color-primary-border: var(--ag-color-brand-primary-border);
  --ag-color-success: var(--ag-color-success);
  --ag-color-success-soft: var(--ag-color-success-soft);
  --ag-color-warning: var(--ag-color-warning);
  --ag-color-warning-soft: var(--ag-color-warning-soft);
  --ag-color-danger: var(--ag-color-error);
  --ag-color-danger-soft: var(--ag-color-error-soft);
  --ag-color-info-soft: var(--ag-color-info-soft);

  /* Old provider form spacing → new tokens */
  --ag-spacing-xs: var(--ag-space-xs);
  --ag-spacing-sm: var(--ag-space-sm);
  --ag-spacing-md: var(--ag-space-md);
  --ag-spacing-lg: var(--ag-space-lg);
  --ag-spacing-xl: var(--ag-space-xl);
  --ag-spacing-2xl: var(--ag-space-2xl);

  /* Old provider form radius → new tokens */
  --ag-radius-lg: var(--ag-radius-3xl);
  --ag-radius-md: var(--ag-radius-lg);
  --ag-radius-pill: var(--ag-radius-full);

  /* Old provider form shadows → new tokens */
  --ag-shadow-soft: var(--ag-shadow-md);
  --ag-shadow-subtle: var(--ag-shadow-sm);

  /* Old provider form typography → new tokens */
  --ag-font-size-xs: var(--ag-font-size-xs);
  --ag-font-size-sm: var(--ag-font-size-sm);
  --ag-font-size-md: var(--ag-font-size-base);
  --ag-font-size-lg: var(--ag-font-size-lg);
  --ag-font-size-xl: var(--ag-font-size-2xl);
  --ag-font-size-2xl: var(--ag-font-size-3xl);
}

/* ========================================
 * REDUCED MOTION
 * ========================================
 * Respect the user's OS-level "Reduce Motion" preference.
 * All animations/transitions are effectively disabled so
 * content changes remain visible but never animate.
 * ======================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}