/*
  Brightway Cloud Design System Variables
  Based on existing Brightway UI brand colors (Radix teal + gray scales)
*/

:root {
  /* === RADIX GRAY SCALE === */
  --gray-1: #fcfcfd;
  --gray-2: #f9f9fb;
  --gray-3: #eff0f3;
  --gray-4: #e7e8ec;
  --gray-5: #e0e1e6;
  --gray-6: #d8d9e0;
  --gray-7: #cdced7;
  --gray-8: #b9bbc6;
  --gray-9: #8b8d98;
  --gray-10: #80828d;
  --gray-11: #62636c;
  --gray-12: #1e1f24;

  /* === RADIX TEAL SCALE (Brand Color) === */
  --teal-1: #fafefe;
  --teal-2: #f3fafa;
  --teal-3: #e2f7f7;
  --teal-4: #d0f1f1;
  --teal-5: #bce8e8;
  --teal-6: #a7dbdc;
  --teal-7: #8ccacb;
  --teal-8: #62b5b6;
  --teal-9: #1d8a8c;
  --teal-10: #007e81;
  --teal-11: #007c7e;
  --teal-12: #163b3c;

  /* === SEMANTIC COLORS === */
  --color-background: var(--gray-1);
  --color-foreground: var(--gray-12);
  --color-muted: var(--gray-3);
  --color-muted-foreground: var(--gray-11);
  --color-border: var(--gray-5);
  --color-border-subtle: var(--gray-4);

  /* Brand colors */
  --color-primary: var(--teal-9);
  --color-primary-dark: var(--teal-10);
  --color-primary-light: var(--teal-3);
  --color-primary-subtle: var(--teal-2);

  /* Interactive states */
  --color-hover: var(--gray-4);
  --color-active: var(--gray-5);

  /* === TYPOGRAPHY === */
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', sans-serif;

  /* Font sizes - fluid with clamp for responsiveness */
  --font-size-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --font-size-sm: clamp(0.875rem, 0.8rem + 0.375vw, 1rem);
  --font-size-base: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
  --font-size-lg: clamp(1.125rem, 1rem + 0.625vw, 1.25rem);
  --font-size-xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);
  --font-size-2xl: clamp(1.5rem, 1.2rem + 1.5vw, 2rem);
  --font-size-3xl: clamp(1.875rem, 1.4rem + 2.375vw, 2.5rem);
  --font-size-4xl: clamp(2.25rem, 1.6rem + 3.25vw, 3rem);
  --font-size-5xl: clamp(3rem, 2rem + 5vw, 4rem);

  /* Font weights */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Line heights */
  --line-height-tight: 1.2;
  --line-height-snug: 1.375;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.625;

  /* === SPACING === */
  --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 */
  --space-32: 8rem;     /* 128px */

  /* === LAYOUT === */
  --max-width-sm: 640px;
  --max-width-md: 768px;
  --max-width-lg: 1024px;
  --max-width-xl: 1280px;
  --max-width-2xl: 1440px;

  --container-padding: var(--space-6);

  /* === BORDER RADIUS === */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.5rem;
  --radius-full: 9999px;

  /* === SHADOWS === */
  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);

  /* === TRANSITIONS === */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Easing curves */
  --ease-out: cubic-bezier(0.33, 1, 0.68, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

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

  /* === GRADIENTS === */

  /* Simple gradients */
  --gradient-primary: linear-gradient(135deg, var(--teal-9) 0%, var(--teal-11) 100%);
  --gradient-subtle: linear-gradient(135deg, var(--gray-1) 0%, var(--gray-2) 100%);
  --gradient-hero: linear-gradient(180deg, var(--gray-1) 0%, var(--teal-1) 100%);

  /* Mesh gradients for backgrounds */
  --gradient-mesh-1: radial-gradient(at 0% 0%, var(--teal-2) 0px, transparent 50%),
                     radial-gradient(at 100% 0%, var(--teal-1) 0px, transparent 50%),
                     radial-gradient(at 100% 100%, var(--gray-2) 0px, transparent 50%),
                     radial-gradient(at 0% 100%, var(--teal-2) 0px, transparent 50%);

  --gradient-mesh-2: radial-gradient(at 20% 30%, rgba(29, 138, 140, 0.08) 0px, transparent 50%),
                     radial-gradient(at 80% 20%, rgba(29, 138, 140, 0.06) 0px, transparent 50%),
                     radial-gradient(at 60% 80%, rgba(29, 138, 140, 0.05) 0px, transparent 50%);

  /* Aurora gradient (subtle, animated) */
  --gradient-aurora: linear-gradient(120deg,
                     var(--teal-1) 0%,
                     var(--gray-1) 20%,
                     var(--teal-2) 40%,
                     var(--gray-2) 60%,
                     var(--teal-1) 80%,
                     var(--gray-1) 100%);

  /* Button gradients */
  --gradient-button-primary: linear-gradient(135deg, var(--teal-9) 0%, var(--teal-10) 100%);
  --gradient-button-primary-hover: linear-gradient(135deg, var(--teal-10) 0%, var(--teal-11) 100%);

  /* Accent gradients */
  --gradient-accent-1: linear-gradient(90deg, var(--teal-8) 0%, var(--teal-9) 50%, var(--teal-8) 100%);
  --gradient-accent-2: linear-gradient(90deg, transparent 0%, var(--teal-3) 50%, transparent 100%);

  /* Glow effects */
  --glow-primary: 0 0 20px rgba(29, 138, 140, 0.15);
  --glow-primary-strong: 0 0 30px rgba(29, 138, 140, 0.25), 0 0 60px rgba(29, 138, 140, 0.1);

  /* === THEME VARIABLES === */
  /* These are overridden in dark mode */
  color-scheme: light;
  --theme-bg: #fafbfc;
  --theme-text: #0a1724;
  --theme-text-secondary: rgba(10, 23, 36, 0.75);
  --theme-text-muted: rgba(10, 23, 36, 0.6);
  --theme-link: rgba(29, 138, 140, 0.9);
  --theme-link-hover: rgba(0, 126, 129, 1);
  --theme-border: rgba(10, 23, 36, 0.1);
  --theme-card-bg: rgba(255, 255, 255, 0.5);
}

/* === DARK THEME === */
[data-theme="dark"] {
  color-scheme: dark;

  /* Semantic colors for dark mode */
  --color-background: #111113;
  --color-foreground: #ededef;
  --color-muted: #222225;
  --color-muted-foreground: #a1a1a9;
  --color-border: #2a2a2d;
  --color-border-subtle: #222225;
  --color-hover: #2a2a2d;
  --color-active: #333336;

  /* Theme-specific variables */
  --theme-bg: #020407;
  --theme-text: #f7f8fb;
  --theme-text-secondary: rgba(255, 255, 255, 0.85);
  --theme-text-muted: rgba(255, 255, 255, 0.55);
  --theme-link: rgba(127, 243, 229, 0.9);
  --theme-link-hover: rgba(127, 243, 229, 1);
  --theme-border: rgba(255, 255, 255, 0.1);
  --theme-card-bg: rgba(8, 18, 28, 0.5);
}

/* === CSS @property for smooth gradient animations === */
@property --gradient-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

@property --gradient-x {
  syntax: '<percentage>';
  initial-value: 0%;
  inherits: false;
}

/* Media query breakpoints */
@custom-media --sm (min-width: 640px);
@custom-media --md (min-width: 768px);
@custom-media --lg (min-width: 1024px);
@custom-media --xl (min-width: 1280px);
@custom-media --2xl (min-width: 1440px);