/* Design tokens: colors, spacing, typography, radii, shadows, motion */

:root {
  /* Brand colors */
  --primary-color: #007AFF;
  --primary-color-rgb: 0, 122, 255;
  --secondary-color: #5856D6;

  /* Neutral palette */
  --background-color: #F5F5F7;
  --background-color-rgb: 245, 245, 247;
  --card-background: #FFFFFF;
  --text-color: #1D1D1F;
  --text-secondary: #6E6E73;
  --border-color: #E5E5EA;
  --shadow-color: rgba(0, 0, 0, 0.1);
  --button-secondary-bg: #F5F5F7;

  /* Extended neutrals */
  --gray-100: #F5F5F7;
  --gray-200: #E5E5EA;
  --gray-300: #D1D1D6;
  --gray-400: #C7C7CC;
  --gray-500: #8E8E93;

  /* Swagger theme base (used in api-docs) */
  --swagger-bg: #FFFFFF;
  --swagger-text: #3B4151;
  --swagger-border: #E5E5EA;
  --swagger-code-bg: #F7F7F9;
  --swagger-code-text: #3B4151;
  --swagger-method-get: #61AFFE;
  --swagger-method-post: #49CC90;
  --swagger-method-delete: #F93E3E;
  --swagger-method-put: #FCA130;

  /* Status colors */
  --status-go: #32D74B;
  --status-hold: #FF9F0A;
  --status-tbd: #8E8E93;
  --status-success: #32D74B;
  --status-failure: #FF453A;
  --status-infly: #0A84FF;
  --status-pending: #8E8E93;
  --status-delayed: #FF9F0A;
  --status-to-be-confirmed: #8E8E93;
  --status-payload-deployed: #32D74B;

  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  /* Fluid type scale */
  --fs--1: clamp(0.9rem, 0.85rem + 0.2vw, 1rem);
  --fs-0: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
  --fs-1: clamp(1.25rem, 1.1rem + 0.6vw, 1.6rem);
  --fs-2: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  --fs-3: clamp(2rem, 1.6rem + 2vw, 3rem);
  --fs-4: clamp(2.5rem, 2rem + 3vw, 4rem);

  /* Radii and elevation */
   --radius-1: 6px;
   --radius-2: 10px;
   --radius-3: 12px;
   --radius-4: 16px;
   --radius-card: 14px;
   --radius-banner: 16px;
   --elevation-1: 0 2px 8px var(--shadow-color);
  --elevation-2: 0 6px 16px var(--shadow-color);

   /* Motion */
   --ease-standard: cubic-bezier(0.2, 0.0, 0.0, 1);
   --dur-fast: 120ms;
   --dur-med: 200ms;
   --dur-slow: 320ms;
   --dur-theme: 300ms;

   /* Hover helpers */
   --hover-bg: rgba(0, 0, 0, 0.05);
   --hover-active-bg: rgba(var(--primary-color-rgb), 0.1);

    /* Component-specific variables */
    --hero-gradient-start: var(--primary-color);
    --hero-gradient-end: var(--secondary-color);
    --feature-card-bg: var(--card-background);

    /* Navigation variables */
    --nav-bg: var(--card-background);
    --nav-border: var(--border-color);

    /* Footer variables */
    --footer-bg: var(--card-background);
    --footer-border: var(--border-color);

    /* Modal/Container variables */
    --modal-bg: var(--card-background);
    --modal-border: var(--border-color);
    --modal-shadow: var(--shadow-color);

    /* Button variables */
    --button-primary-bg: var(--primary-color);
    --button-secondary-bg: var(--button-secondary-bg);
}

[data-theme="dark"] {
  --primary-color: #0A84FF;
  --primary-color-rgb: 10, 132, 255;
  --secondary-color: #5E5CE6;
  --background-color: #000000;
  --background-color-rgb: 0, 0, 0;
  --card-background: #1C1C1E;
  --text-color: #FFFFFF;
  --text-secondary: #98989D;
  --border-color: #38383A;
  --shadow-color: rgba(0, 0, 0, 0.3);
  --button-secondary-bg: #2C2C2E;

  --gray-100: #1C1C1E;
  --gray-200: #2C2C2E;
  --gray-300: #38383A;
  --gray-400: #48484A;
  --gray-500: #98989D;

  --swagger-bg: #1C1C1E;
  --swagger-text: #FFFFFF;
  --swagger-border: #38383A;
  --swagger-code-bg: #2C2C2E;
  --swagger-code-text: #FFFFFF;
  --swagger-method-get: #0A84FF;
  --swagger-method-post: #32D74B;
  --swagger-method-delete: #FF453A;
  --swagger-method-put: #FF9F0A;

   --hover-bg: rgba(255, 255, 255, 0.05);
   --hover-active-bg: rgba(var(--primary-color-rgb), 0.2);

    /* Component-specific variables (dark) */
    --hero-gradient-start: #0A84FF;
    --hero-gradient-end: #5E5CE6;
    --feature-card-bg: #2C2C2E;

    /* Navigation variables (dark) */
    --nav-bg: var(--card-background);
    --nav-border: var(--border-color);

    /* Footer variables (dark) */
    --footer-bg: var(--card-background);
    --footer-border: var(--border-color);

    /* Modal/Container variables (dark) */
    --modal-bg: var(--card-background);
    --modal-border: var(--border-color);
    --modal-shadow: var(--shadow-color);

    /* Button variables (dark) */
    --button-primary-bg: var(--primary-color);
    --button-secondary-bg: var(--button-secondary-bg);

   /* Status colors (dark) */
  --status-go: #32D74B;
  --status-hold: #FF9F0A;
  --status-tbd: #98989D;
  --status-success: #32D74B;
  --status-failure: #FF453A;
  --status-infly: #0A84FF;
  --status-pending: #98989D;
  --status-delayed: #FF9F0A;
  --status-to-be-confirmed: #98989D;
  --status-payload-deployed: #32D74B;
}

/* Utility tokens */
:root {
  --z-nav: 1000;
  --z-modal: 1100;
}