@theme {
  /* Primary color palette - full 50-950 range */
  --color-primary-50: oklch(0.962 0.018 272.314);
  --color-primary-100: oklch(0.93 0.034 272.788);
  --color-primary-200: oklch(0.87 0.065 274.039);
  --color-primary-300: oklch(0.785 0.115 274.713);
  --color-primary-400: oklch(0.673 0.182 276.935);
  --color-primary-500: oklch(0.585 0.233 277.117);
  --color-primary-600: oklch(0.511 0.262 276.966);
  --color-primary-700: oklch(0.457 0.24 277.023);
  --color-primary-800: oklch(0.398 0.195 277.366);
  --color-primary-900: oklch(0.359 0.144 278.697);
  --color-primary-950: oklch(0.257 0.09 281.288);

  --color-primary: var(--color-primary-600);
  --color-primary-contrast: var(--color-neutral-50);

  /* Secondary color palette - Tailwind v4 gray */
  --color-secondary-50: oklch(0.984 0.003 247.858);
  --color-secondary-100: oklch(0.968 0.007 247.896);
  --color-secondary-200: oklch(0.929 0.013 255.508);
  --color-secondary-300: oklch(0.869 0.022 252.894);
  --color-secondary-400: oklch(0.704 0.04 256.788);
  --color-secondary-500: oklch(0.554 0.046 257.417);
  --color-secondary-600: oklch(0.446 0.043 257.281);
  --color-secondary-700: oklch(0.372 0.044 257.287);
  --color-secondary-800: oklch(0.279 0.041 260.031);
  --color-secondary-900: oklch(0.208 0.042 265.755);
  --color-secondary-950: oklch(0.129 0.042 264.695);

  --color-secondary: var(--color-secondary-600);
  --color-secondary-contrast: var(--color-neutral-50);

  /* Danger/Error color palette - full 50-950 range */
  --color-danger-50: oklch(0.971 0.013 17.38);
  --color-danger-100: oklch(0.936 0.032 17.717);
  --color-danger-200: oklch(0.885 0.062 18.334);
  --color-danger-300: oklch(0.808 0.114 19.571);
  --color-danger-400: oklch(0.704 0.191 22.216);
  --color-danger-500: oklch(0.637 0.237 25.331);
  --color-danger-600: oklch(0.577 0.245 27.325);
  --color-danger-700: oklch(0.505 0.213 27.518);
  --color-danger-800: oklch(0.444 0.177 26.899);
  --color-danger-900: oklch(0.396 0.141 25.723);
  --color-danger-950: oklch(0.258 0.092 26.042);

  --color-danger: var(--color-danger-600);
  --color-danger-contrast: var(--color-neutral-50);

  /* Success color palette - Tailwind v4 teal */
  --color-success-50: oklch(0.984 0.014 180.72);
  --color-success-100: oklch(0.953 0.051 180.801);
  --color-success-200: oklch(0.91 0.096 180.426);
  --color-success-300: oklch(0.855 0.138 181.071);
  --color-success-400: oklch(0.777 0.152 181.912);
  --color-success-500: oklch(0.704 0.14 182.503);
  --color-success-600: oklch(0.6 0.118 184.704);
  --color-success-700: oklch(0.511 0.096 186.391);
  --color-success-800: oklch(0.437 0.078 188.216);
  --color-success-900: oklch(0.386 0.063 188.416);
  --color-success-950: oklch(0.277 0.046 192.524);

  --color-success: var(--color-success-600);
  --color-success-contrast: var(--color-neutral-50);

  /* Warning color palette - full 50-950 range */
  --color-warning-50: oklch(0.987 0.022 95.277);
  --color-warning-100: oklch(0.962 0.059 95.617);
  --color-warning-200: oklch(0.924 0.12 95.746);
  --color-warning-300: oklch(0.879 0.169 91.605);
  --color-warning-400: oklch(0.828 0.189 84.429);
  --color-warning-500: oklch(0.769 0.188 70.08);
  --color-warning-600: oklch(0.666 0.179 58.318);
  --color-warning-700: oklch(0.555 0.163 48.998);
  --color-warning-800: oklch(0.473 0.137 46.201);
  --color-warning-900: oklch(0.414 0.112 45.904);
  --color-warning-950: oklch(0.279 0.077 45.635);

  --color-warning: var(--color-warning-600);
  --color-warning-contrast: var(--color-neutral-50);

  /* text color */
  --color-text-primary: var(--color-neutral-950);
  --color-text-secondary: var(--color-neutral-700);
  --color-text-placeholder: var(--color-neutral-400);
  --color-text-muted: var(--color-neutral-500);
  --color-text-disabled: var(--color-neutral-400);
  --color-text-inverse: var(--color-neutral-50);

  /* generic colors */
  --color-border: oklch(90% 0 0);
  --color-border-secondary: oklch(87% 0 0);
  --color-surface: oklch(100% 0 0);
  --color-chart-track: rgba(0, 0, 0, 0.06);
  --color-background: oklch(98.5% 0.002 247.839);
  --color-background-secondary: oklch(98.5% 0 0);
  --color-background-tertiary: oklch(90% 0.002 247.839);
  --color-background-quaternary: oklch(85% 0.002 247.839);
  --color-background-quinary: oklch(80% 0.002 247.839);
  --color-background-disabled: var(--color-neutral-100);

  --color-neutral-50: oklch(98.5% 0 0);
  --color-neutral-100: oklch(97% 0 0);
  --color-neutral-200: oklch(92.2% 0 0);
  --color-neutral-300: oklch(87% 0 0);
  --color-neutral-400: oklch(70.8% 0 0);
  --color-neutral-500: oklch(55.6% 0 0);
  --color-neutral-600: oklch(43.9% 0 0);
  --color-neutral-700: oklch(37.1% 0 0);
  --color-neutral-800: oklch(26.9% 0 0);
  --color-neutral-900: oklch(20.5% 0 0);
  --color-neutral-950: oklch(14.5% 0 0);

  /* Font family variables */
  --font-family-base: var(--font-sans);
  --font-cursive: "Birthstone", cursive;
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  /* Form element variables — fixed px so they don't scale with root font-size */
  --form-min-h-sm: 32px; /* h-8 in Tailwind */
  --form-min-h-md: 40px; /* h-10 in Tailwind */
  --form-min-h-lg: 48px; /* h-12 in Tailwind */

  --form-label-pb: 8px; /* pb-2 in Tailwind */

  --form-px-sm: 12px; /* px-3 in Tailwind */
  --form-px-md: 14px; /* px-3.5 in Tailwind */
  --form-px-lg: 16px; /* px-4 in Tailwind */

  --form-py-sm: 8px; /* py-1 in Tailwind */
  --form-py-md: 10px; /* py-2 in Tailwind */
  --form-py-lg: 12px; /* py-3 in Tailwind */

  /* ============================================
     BORDER RADIUS SYSTEM
     Change --radius-base to adjust the entire UI.
     Individual --*-radius variables can be overridden independently.
     ============================================ */
  --radius-base: 8px; /* Base radius token */

  /* Forms & Controls (1x base = 8px) */
  --form-radius: var(--radius-base);

  /* Overlays (1.5x base = 12px) */
  --dropdown-radius: calc(var(--radius-base) * 1.5);
  --tooltip-radius: var(--radius-base);
  --codeblock-radius: calc(var(--radius-base) * 1.5);
  --popover-radius: calc(var(--radius-base) * 1.5);

  /* Feedback surfaces */
  --alert-radius: calc(var(--radius-base) * 1.5);
  --toast-radius: calc(var(--radius-base) * 2);
  --drawer-radius: calc(var(--radius-base) * 2);
  --metric-radius: calc(var(--radius-base) * 2);

  /* Surfaces (3x base = 24px) */
  --card-radius: calc(var(--radius-base) * 1.5);
  --modal-radius: calc(var(--radius-base) * 1.5);

  /* Special shapes - not part of scale */
  --segmented-radius: var(--form-radius);
  --avatar-radius: 50%;

  /* Focus ring styling */
  --form-focus-ring-width: 2px;
  --form-focus-ring-offset: -1px;
  --form-focus-ring-opacity: 0.1;

  /* Outline/border styling */
  --form-outline-width: 1px;
  --form-outline-focused-width: 2px;

  /* Button variables - inheriting from form variables */
  --button-radius: var(--form-radius);
  --button-min-h-sm: var(--form-min-h-sm);
  --button-min-h-md: var(--form-min-h-md);
  --button-min-h-lg: var(--form-min-h-lg);

  /* Button padding — fixed px */
  --button-px-sm: 12px;
  --button-py-sm: 0;
  --button-px-md: 14px;
  --button-py-md: 0;
  --button-px-lg: 20px;
  --button-py-lg: 0;

  /* Button icon-only padding — fixed px */
  --button-icon-p-sm: 6px;
  --button-icon-p-md: 8px;
  --button-icon-p-lg: 10px;

  /* Button icon-only sizes */
  --button-icon-size-sm: var(--form-min-h-sm);
  --button-icon-size-md: var(--form-min-h-md);
  --button-icon-size-lg: var(--form-min-h-lg);

  /* Badge variables */
  --badge-radius: 6px;

  /* Segmented variables - now defined in radius system above */
  --segmented-min-h-sm: var(--form-min-h-sm);
  --segmented-min-h-md: var(--form-min-h-md);
  --segmented-min-h-lg: var(--form-min-h-lg);

  /* Segmented padding */
  --segmented-px-sm: var(--form-px-sm);
  --segmented-px-md: var(--form-px-md);
  --segmented-px-lg: var(--form-px-lg);

  --segmented-py-sm: var(--form-py-sm);
  --segmented-py-md: var(--form-py-md);
  --segmented-py-lg: var(--form-py-lg);

  /* Segmented sliding background */
  --segmented-active-bg: #ffffff;
  --segmented-active-shadow:
    0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);

  /* Glass effect variables */
  --glass-layer-padding: 0.5px;
  --glass-layer-border-width: 0.5px;
  --glass-layer-inner-offset: 1.5px;

  /* Glass effect gradient variables */
  --glass-gradient-outer: linear-gradient(
    to bottom,
    rgba(250, 250, 250, 0.8) 0%,
    rgba(229, 229, 229, 0.8) 30%,
    rgba(242, 242, 242, 0.8) 70%,
    rgba(250, 250, 250, 0.8) 100%
  );
  --glass-gradient-inner: linear-gradient(
    to bottom,
    rgba(242, 242, 242, 0.8) 0%,
    rgba(250, 250, 250, 0.8) 100%
  );

  /* Chat message variables */
  --chat-bubble-border-sender: rgba(255, 255, 255, 0.4);
  --chat-bubble-border-receiver: rgba(255, 255, 255, 1);

  /* Avatar variables — fixed px */
  --avatar-size-xs: 24px; /* size-6 in Tailwind */
  --avatar-size-sm: 32px; /* size-8 in Tailwind */
  --avatar-size-md: 40px; /* size-10 in Tailwind */
  --avatar-size-lg: 48px; /* size-12 in Tailwind */
  --avatar-size-xl: 64px; /* size-16 in Tailwind */

  /* Avatar radius - now defined in radius system above */

  /* Carousel Variables */
  --carousel-container-width: 100%; /* Full width container */
  --carousel-slide-width: 66vw; /* Default slide width - can be overridden */
  --carousel-slide-height: 44rem; /* 384px = h-96 */
  --carousel-slide-gap: 16px; /* gap between slides */
  --carousel-controls-size: 48px; /* control button size */
  --carousel-controls-offset: 16px; /* distance from edge */

  /* Popover variables - radius now defined in radius system above */
  --popover-shadow:
    0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --popover-border-width: 1px;
  --popover-backdrop-opacity: 0.5;
  --popover-offset-sm: 8px;
  --popover-offset-md: 8px;
  --popover-offset-lg: 12px;
  --popover-max-width-sm: 256px;
  --popover-max-width-md: 384px;
  --popover-max-width-lg: 512px;
  --popover-padding-sm: 12px;
  --popover-padding-md: 12px;
  --popover-padding-lg: 16px;

  /* NavItem variables */
  --nav-item-radius: var(--radius-base);
  --nav-item-min-h: 40px; /* h-10 in Tailwind */

  /* NavItem padding — fixed px */
  --nav-item-px: 12px; /* px-3 in Tailwind */
  --nav-item-py: 10px; /* py-2.5 in Tailwind */

  /* Modal and Drawer */
  --overlay-bg: rgba(0, 0, 0, 0.65);
  --overlay-blur: 2px;
  --color-scale-background: oklch(0% 0 0); /* backdrop behind scaled content */
  /* Modal radius - now defined in radius system above */

  /* Shadow color presets for utility generation */
  --shadow-color-primary: var(--color-primary);
  --shadow-color-success: var(--color-success);
  --shadow-color-warning: var(--color-warning);
  --shadow-color-danger: var(--color-danger);
  --shadow-color-secondary: var(--color-secondary);

  /* Neumorphic tokens — light mode (multi-layer realistic) */
  --neu-raised-shadow:
    1px 1px 2px rgba(0, 0, 0, 0.04), 3px 3px 6px rgba(0, 0, 0, 0.06),
    6px 6px 14px rgba(0, 0, 0, 0.08), 12px 12px 28px rgba(0, 0, 0, 0.04),
    -1px -1px 2px rgba(255, 255, 255, 0.5),
    -3px -3px 6px rgba(255, 255, 255, 0.5),
    -6px -6px 14px rgba(255, 255, 255, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 -1px 0 rgba(0, 0, 0, 0.04);
  --neu-inset-shadow:
    inset 1px 1px 2px rgba(0, 0, 0, 0.06),
    inset 2px 2px 4px rgba(0, 0, 0, 0.06),
    inset 4px 4px 8px rgba(0, 0, 0, 0.05),
    inset 8px 8px 16px rgba(0, 0, 0, 0.03),
    inset -1px -1px 2px rgba(255, 255, 255, 0.5),
    inset -3px -3px 6px rgba(255, 255, 255, 0.4),
    inset -6px -6px 12px rgba(255, 255, 255, 0.2),
    0 1px 0 rgba(255, 255, 255, 0.5);
  --neu-circle-groove-shadow:
    inset 0.5px 0.5px 1px rgba(0, 0, 0, 0.08),
    inset 1px 1px 3px rgba(0, 0, 0, 0.08),
    inset 2px 2px 5px rgba(0, 0, 0, 0.04), 0.5px 0.5px 1px rgba(0, 0, 0, 0.4),
    1px 1px 2px rgba(0, 0, 0, 0.3);
  --neu-circle-disc-shadow:
    inset 0.5px 0.5px 1px rgba(0, 0, 0, 0.05),
    inset 1px 1px 3px rgba(0, 0, 0, 0.04),
    inset -0.5px -0.5px 1px rgba(255, 255, 255, 0.4),
    inset -1px -1px 2px rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.06),
    0 2px 4px rgba(0, 0, 0, 0.04);
  --neu-raised-border: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.7) 0%,
    rgba(255, 255, 255, 0.35) 30%,
    transparent 50%,
    rgba(0, 0, 0, 0.06) 100%
  );
  --neu-inset-border: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.1) 0%,
    rgba(0, 0, 0, 0.04) 25%,
    rgba(255, 255, 255, 0.15) 50%,
    rgba(255, 255, 255, 0.35) 75%,
    rgba(255, 255, 255, 0.5) 100%
  );
}

/* ============================================
   DARK MODE OVERRIDES
   Add .dark class to <html> or a parent container
   to enable dark mode. All CSS variable-based
   components will automatically adapt.

   IMPORTANT: Dark mode overrides MUST be in @layer theme
   (not @layer base) for proper cascade priority in Tailwind v4.
   This ensures CSS variable overrides take precedence over
   Tailwind's generated theme styles.
   ============================================ */
@layer theme {
  .dark {
    /* Text colors - inverted for dark backgrounds */

    --color-text-primary: var(--color-neutral-50);
    --color-text-secondary: var(--color-neutral-400);
    --color-text-placeholder: var(--color-neutral-600);
    --color-text-muted: var(--color-neutral-500);
    --color-text-disabled: var(--color-neutral-400);
    --color-text-inverse: var(--color-neutral-950);

    /* Base theme colors */
    --color-primary: var(--color-primary-600);
    --color-success: var(--color-success-400);
    --color-warning: var(--color-warning-400);
    --color-danger: var(--color-danger-400);
    --color-secondary: var(--color-secondary-400);

    /* Contrast colors for filled variants on semantic backgrounds */
    --color-primary-contrast: var(--color-neutral-50);
    --color-danger-contrast: var(--color-neutral-50);
    --color-success-contrast: var(--color-neutral-50);
    --color-warning-contrast: var(--color-neutral-50);
    --color-secondary-contrast: var(--color-neutral-50);

    /* Background colors - dark equivalents */
    --color-surface: oklch(14.5% 0 0);
    --color-background: oklch(14.5% 0 0);
    --color-background-secondary: oklch(18% 0 0);
    --color-background-tertiary: oklch(22% 0 0);
    --color-background-quaternary: oklch(26% 0 0);
    --color-background-quinary: oklch(30% 0 0);
    --color-background-disabled: var(--color-neutral-800);

    /* Scale backdrop */
    --color-scale-background: oklch(8% 0 0);

    /* Border - darker for dark mode */
    --color-border: oklch(30% 0 0 / 0.8);
    --color-border-secondary: oklch(35% 0 0 / 0.8);
    --color-chart-track: rgba(255, 255, 255, 0.05);

    /* Glass effect gradients - dark mode */
    --glass-gradient-outer: linear-gradient(
      135deg,
      var(--color-background-tertiary) 0%,
      var(--color-background-secondary) 30%,
      var(--color-background) 70%,
      var(--color-background-tertiary) 100%
    );
    --glass-gradient-inner: linear-gradient(
      to bottom,
      var(--color-background-secondary) 0%,
      var(--color-background) 100%
    );

    /* Scrollbar - dark mode */
    --ui-scrollbar-thumb-rest: rgba(75, 85, 99, 0.3);
    --ui-scrollbar-thumb-active: rgb(75 85 99);
    --ui-scrollbar-track-rest: transparent;
    --ui-scrollbar-track-active: rgba(55, 65, 81, 0.1);

    /* Neumorphic tokens — dark mode (multi-layer realistic) */
    --neu-raised-shadow:
      1px 1px 2px rgba(0, 0, 0, 0.2), 3px 3px 6px rgba(0, 0, 0, 0.25),
      6px 6px 14px rgba(0, 0, 0, 0.2), 12px 12px 28px rgba(0, 0, 0, 0.1),
      -1px -1px 2px rgba(255, 255, 255, 0.02),
      -3px -3px 6px rgba(255, 255, 255, 0.015),
      -6px -6px 14px rgba(255, 255, 255, 0.01),
      inset 0 1px 0 rgba(255, 255, 255, 0.04),
      inset 0 -1px 0 rgba(0, 0, 0, 0.15);
    --neu-inset-shadow:
      inset 1px 1px 2px rgba(0, 0, 0, 0.3),
      inset 2px 2px 4px rgba(0, 0, 0, 0.25),
      inset 4px 4px 8px rgba(0, 0, 0, 0.2),
      inset 8px 8px 16px rgba(0, 0, 0, 0.1),
      inset -1px -1px 2px rgba(255, 255, 255, 0.02),
      inset -3px -3px 6px rgba(255, 255, 255, 0.015),
      0 1px 0 rgba(255, 255, 255, 0.04);
    --neu-circle-groove-shadow:
      inset 0.5px 0.5px 1px rgba(0, 0, 0, 0.4),
      inset 1px 1px 2px rgba(0, 0, 0, 0.35),
      inset 2px 2px 5px rgba(0, 0, 0, 0.2),
      0.5px 0.5px 1px rgba(255, 255, 255, 0.04),
      1px 1px 2px rgba(255, 255, 255, 0.03);
    --neu-circle-disc-shadow:
      inset 0.5px 0.5px 1px rgba(0, 0, 0, 0.2),
      inset 1px 1px 3px rgba(0, 0, 0, 0.15),
      inset -0.5px -0.5px 1px rgba(255, 255, 255, 0.04),
      inset -1px -1px 2px rgba(255, 255, 255, 0.03),
      0 1px 2px rgba(0, 0, 0, 0.25), 0 2px 4px rgba(0, 0, 0, 0.2);
    --neu-raised-border: linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.2) 0%,
      rgba(255, 255, 255, 0.08) 30%,
      transparent 50%,
      rgba(0, 0, 0, 0.12) 100%
    );
    --neu-inset-border: linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.4) 0%,
      rgba(0, 0, 0, 0.15) 25%,
      rgba(255, 255, 255, 0.03) 50%,
      rgba(255, 255, 255, 0.08) 75%,
      rgba(255, 255, 255, 0.12) 100%
    );
  }
}
