/* ===========================================
   CSS Custom Properties (Variables)
   ===========================================
   Change --color-primary-h and --color-primary-s
   to re-theme the entire application.

   NOTE: Variables are NOT in @layer - they must
   be available globally to all layers.
   =========================================== */

:root {
  --color-white: #FFFFFF;
  /* ============================================
     THEME VARIABLES (change these to re-theme)
     ============================================ */
  --color-primary-h: 205;      /* Hue: blue */
  --color-primary-s: 75%;      /* Saturation: vivid blue */

  /* ============================================
     PRIMARY PALETTE (generated from theme vars)
     ============================================ */
  --color-primary-50:  hsl(var(--color-primary-h), var(--color-primary-s), 95%);
  --color-primary-100: hsl(var(--color-primary-h), var(--color-primary-s), 90%);
  --color-primary-200: hsl(var(--color-primary-h), var(--color-primary-s), 80%);
  --color-primary-300: hsl(var(--color-primary-h), var(--color-primary-s), 70%);
  --color-primary-400: hsl(var(--color-primary-h), var(--color-primary-s), 60%);
  --color-primary-500: hsl(var(--color-primary-h), var(--color-primary-s), 50%);
  --color-primary-600: hsl(var(--color-primary-h), var(--color-primary-s), 40%);
  --color-primary-700: hsl(var(--color-primary-h), var(--color-primary-s), 30%);
  --color-primary-800: hsl(var(--color-primary-h), var(--color-primary-s), 20%);
  --color-primary-900: hsl(var(--color-primary-h), var(--color-primary-s), 10%);

  /* ============================================
     NEUTRAL GRAYS (independent of theme)
     ============================================ */
  --color-gray-50:  #fafafa;
  --color-gray-100: #f5f5f5;
  --color-gray-200: #e5e5e5;
  --color-gray-300: #d4d4d4;
  --color-gray-400: #a3a3a3;
  --color-gray-500: #737373;
  --color-gray-600: #525252;
  --color-gray-700: #404040;
  --color-gray-800: #262626;
  --color-gray-900: #171717;

  /* ============================================
     SEMANTIC COLORS (fixed, don't change)
     ============================================ */
  --color-error:      #dc2626;
  --color-error-dark: #b91c1c;
  --color-success:      #16a34a;
  --color-success-dark: #138a3e;
  --color-warning: #ca8a04;
  --color-info:    #2563eb;

  /* Semantic light variants (for backgrounds) */
  --color-error-light:   #fef2f2;
  --color-success-light: #f0fdf4;
  --color-warning-light: #fefce8;
  --color-info-light:    #eff6ff;

  /* ============================================
     FUNCTIONAL TOKENS (derived from primary)
     ============================================ */
  --color-text:         var(--color-gray-900);
  --color-text-muted:   var(--color-gray-600);
  --color-text-light:   var(--color-gray-500);
  --color-background:   #ffffff;
  --color-surface:      var(--color-gray-50);

  --color-border:       var(--color-gray-300);
  --color-border-hover: var(--color-primary-400);

  --color-link:         var(--color-primary-700);
  --color-link-hover:   var(--color-primary-900);

  --color-focus:        var(--color-primary-500);

  /* ============================================
     SHADOWS (tinted with primary color)
     ============================================ */
  --shadow-color:       var(--color-primary-h) var(--color-primary-s) 20%;
  --shadow-sm:          0 1px 2px hsl(var(--shadow-color) / 0.1);
  --shadow-md:          0 4px 6px hsl(var(--shadow-color) / 0.15);
  --shadow-lg:          0 10px 15px hsl(var(--shadow-color) / 0.2);
  --shadow-xl:          0 20px 25px hsl(var(--shadow-color) / 0.25);

  /* ============================================
     SPACING SCALE
     ============================================ */
  --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 */
  --space-20: 5rem;     /* 80px */
  --space-24: 6rem;     /* 96px */

  /* ============================================
     BORDER RADIUS
     ============================================ */
  --radius-xs:   0.125rem;  /* 2px */
  --radius-sm:   0.25rem;   /* 4px */
  --radius-md:   0.375rem;  /* 6px */
  --radius-lg:   0.5rem;    /* 8px */
  --radius-xl:   0.75rem;   /* 12px */
  --radius-2xl:  1rem;      /* 16px */
  --radius-full: 9999px;    /* Pill shape */

  /* ============================================
     TRANSITIONS
     ============================================ */
  --transition-fast:   150ms ease;
  --transition-normal: 200ms ease;
  --transition-slow:   300ms ease;

  /* ============================================
     Z-INDEX SCALE
     ============================================ */
  --z-dropdown:  100;
  --z-sticky:    200;
  --z-modal:     300;
  --z-popover:   400;
  --z-tooltip:   500;

  /* ============================================
     BREAKPOINTS (for reference in media queries)
     ============================================ */
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;

  /* ============================================
     SIDEBAR WIDTH
     ============================================ */
  --sidebar-width: 20rem;

  /* ============================================
     MARKETING PAGE TOKENS
     ============================================ */

  /* Gradients */
  --gradient-text-blue: linear-gradient(135deg, var(--color-primary-600) 0%, var(--color-primary-400) 100%);
  --gradient-hero: linear-gradient(180deg, hsl(var(--color-primary-h), var(--color-primary-s), 96%) 0%, var(--color-white) 100%);
  --gradient-section-alt: linear-gradient(180deg, hsl(var(--color-primary-h), 30%, 97%) 0%, hsl(var(--color-primary-h), 20%, 99%) 100%);
  --gradient-cta: linear-gradient(180deg, hsl(var(--color-primary-h), var(--color-primary-s), 95%) 0%, hsl(var(--color-primary-h), var(--color-primary-s), 90%) 100%);

  /* Card Shadows */
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.06);
  --shadow-card-hover: 0 4px 8px rgba(0, 0, 0, 0.06), 0 12px 28px rgba(0, 0, 0, 0.1);

  /* Icon Containers */
  --icon-container-size: 3rem;
  --icon-container-bg: var(--color-primary-50);
  --icon-container-radius: var(--radius-xl);

  /* Section Badge Pills */
  --badge-pill-bg: var(--color-primary-50);
  --badge-pill-color: var(--color-primary-700);
}

/* ===========================================
   DARK MODE THEME (Claude-inspired)
   ===========================================
   Applied via data-theme="dark" on <html>.
   Primary color stays the same blue.
   =========================================== */

[data-theme="dark"] {
  /* ============================================
     BACKGROUND & SURFACE COLORS
     ============================================ */
  --color-background: #14181c;
  --color-background-dark: #000000;
  --color-surface: #1c2228;
  --color-hover: #232a31;
  --color-surface-elevated: #2D2D2D;

  --color-primary-600: hsl(var(--color-primary-h), var(--color-primary-s), 50%);
  --color-primary-700: hsl(var(--color-primary-h), var(--color-primary-s), 60%);

  /* ============================================
     NEUTRAL GRAYS (inverted for dark mode)
     ============================================ */
  --color-gray-50:  #171717;
  --color-gray-100: #262626;
  --color-gray-200: #333333;
  --color-gray-300: #404040;
  --color-gray-400: #525252;
  --color-gray-500: #737373;
  --color-gray-600: #a3a3a3;
  --color-gray-700: #d4d4d4;
  --color-gray-800: #e5e5e5;
  --color-gray-900: #f5f5f5;

  /* ============================================
     FUNCTIONAL TOKENS (dark mode overrides)
     ============================================ */
  --color-text:         #FFFFFF;
  --color-text-muted:   #A0A0A0;
  --color-text-light:   #808080;

  --color-border:       #3D3D3D;
  --color-border-hover: var(--color-primary-400);

  --color-link:         var(--color-primary-400);
  --color-link-hover:   var(--color-primary-300);

  /* ============================================
     SEMANTIC COLORS (dark mode)
     ============================================ */
  --color-error-dark:    #ef4444;
  --color-success-dark:  #22c55e;

  --color-error-light:   #2D1A1A;
  --color-success-light: #1A2D1A;
  --color-warning-light: #2D2A1A;
  --color-info-light:    #1A1A2D;

  /* ============================================
     SHADOWS (darker for dark mode)
     ============================================ */
  --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md:  0 4px 6px rgba(0, 0, 0, 0.4);
  --shadow-lg:  0 10px 15px rgba(0, 0, 0, 0.5);
  --shadow-xl:  0 20px 25px rgba(0, 0, 0, 0.6);

}