@import 'tailwindcss';
@plugin 'tailwindcss-animate';

@variant dark (&:where(.dark, .dark *));
@custom-variant focus-input-within (&:has(input:focus));

@utility transition-inherit-all {
  transition-property: inherit;
  transition-duration: inherit;
  transition-timing-function: inherit;
}

@source '../components/**/*.{js,ts,jsx,tsx}';
@source '../utils/**/*.{js,ts,jsx,tsx}';

@theme {
  /* AlignUI Raw Colors */
  --color-gray-950: #171717;
  --color-gray-900: #1c1c1c;
  --color-gray-800: #262626;
  --color-gray-700: #333333;
  --color-gray-600: #5c5c5c;
  --color-gray-500: #7b7b7b;
  --color-gray-400: #a3a3a3;
  --color-gray-300: #d1d1d1;
  --color-gray-200: #ebebeb;
  --color-gray-100: #f5f5f5;
  --color-gray-50: #f7f7f7;
  --color-gray-0: #ffffff;
  /* Alpha colors are opaque sources; apply opacity with Tailwind's /10, /16, /24 modifiers. */
  --color-gray-alpha: #a3a3a3;

  --color-slate-950: #0e121b;
  --color-slate-900: #181b25;
  --color-slate-800: #222530;
  --color-slate-700: #2b303b;
  --color-slate-600: #525866;
  --color-slate-500: #717784;
  --color-slate-400: #99a0ae;
  --color-slate-300: #cacfd8;
  --color-slate-200: #eaecf0;
  --color-slate-100: #f2f5f8;
  --color-slate-50: #f5f7fa;
  --color-slate-0: #ffffff;
  --color-slate-alpha: #99a0ae;

  --color-blue-950: #122368;
  --color-blue-900: #182f8b;
  --color-blue-800: #1f3bad;
  --color-blue-700: #2547d0;
  --color-blue-600: #3559e9;
  --color-blue-500: #335cff;
  --color-blue-400: #4d82ff;
  --color-blue-300: #97baff;
  --color-blue-200: #c0d5ff;
  --color-blue-100: #d5e2ff;
  --color-blue-50: #ebf1ff;
  --color-blue-alpha: #476cff;

  --color-orange-950: #71330a;
  --color-orange-900: #96440d;
  --color-orange-800: #b75310;
  --color-orange-700: #ce5e12;
  --color-orange-600: #e16614;
  --color-orange-500: #fa7319;
  --color-orange-400: #ffa468;
  --color-orange-300: #ffc197;
  --color-orange-200: #ffd9c0;
  --color-orange-100: #ffe6d5;
  --color-orange-50: #fff3eb;
  --color-orange-alpha: #fa7319;

  --color-red-950: #681219;
  --color-red-900: #8b1822;
  --color-red-800: #ad1f2b;
  --color-red-700: #d02533;
  --color-red-600: #e93544;
  --color-red-500: #fb3748;
  --color-red-400: #ff6875;
  --color-red-300: #ff97a0;
  --color-red-200: #ffc0c5;
  --color-red-100: #ffd5d8;
  --color-red-50: #ffebec;
  --color-red-alpha: #fb3748;

  --color-green-950: #0b4627;
  --color-green-900: #16643b;
  --color-green-800: #1a7544;
  --color-green-700: #178c4e;
  --color-green-600: #1daf61;
  --color-green-500: #1fc16b;
  --color-green-400: #3ee089;
  --color-green-300: #84ebb4;
  --color-green-200: #c2f5da;
  --color-green-100: #d6f5e8;
  --color-green-50: #e3f7ec;
  --color-green-alpha: #1fc16b;

  --color-yellow-950: #624c18;
  --color-yellow-900: #86661d;
  --color-yellow-800: #a78025;
  --color-yellow-700: #c99a2c;
  --color-yellow-600: #e6a819;
  --color-yellow-500: #f6b51e;
  --color-yellow-400: #ffd268;
  --color-yellow-300: #ffe097;
  --color-yellow-200: #ffecc0;
  --color-yellow-100: #ffefcc;
  --color-yellow-50: #fffaeb;
  --color-yellow-alpha: #fbc64b;

  --color-purple-950: #351a75;
  --color-purple-900: #3d1d86;
  --color-purple-800: #4c25a7;
  --color-purple-700: #5b2cc9;
  --color-purple-600: #693ee0;
  --color-purple-500: #7d52f4;
  --color-purple-400: #8c71f6;
  --color-purple-300: #a897ff;
  --color-purple-200: #cac0ff;
  --color-purple-100: #dcd5ff;
  --color-purple-50: #efebff;
  --color-purple-alpha: #784def;

  --color-sky-950: #124b68;
  --color-sky-900: #18658b;
  --color-sky-800: #1f7ead;
  --color-sky-700: #2597d0;
  --color-sky-600: #35ade9;
  --color-sky-500: #47c2ff;
  --color-sky-400: #68cdff;
  --color-sky-300: #97dcff;
  --color-sky-200: #c0eaff;
  --color-sky-100: #d5f1ff;
  --color-sky-50: #ebf8ff;
  --color-sky-alpha: #47c2ff;

  --color-pink-950: #68123d;
  --color-pink-900: #8b1852;
  --color-pink-800: #ad1f66;
  --color-pink-700: #d0257a;
  --color-pink-600: #e9358f;
  --color-pink-500: #fb4ba3;
  --color-pink-400: #ff68b3;
  --color-pink-300: #ff97cb;
  --color-pink-200: #ffc0df;
  --color-pink-100: #ffd5ea;
  --color-pink-50: #ffebf4;
  --color-pink-alpha: #fb4ba3;

  --color-teal-950: #0b463e;
  --color-teal-900: #16645a;
  --color-teal-800: #1a7569;
  --color-teal-700: #178c7d;
  --color-teal-600: #1daf9c;
  --color-teal-500: #22d3bb;
  --color-teal-400: #3fdec9;
  --color-teal-300: #84ebdd;
  --color-teal-200: #c2f5ee;
  --color-teal-100: #d0fbf5;
  --color-teal-50: #e4fbf8;
  --color-teal-alpha: #22d3bb;

  --color-white-alpha: #ffffff;

  --color-black-alpha: #171717;

  /* AlignUI Dynamic Neutral Colors */
  --color-neutral-950: var(--color-gray-950);
  --color-neutral-900: var(--color-gray-900);
  --color-neutral-800: var(--color-gray-800);
  --color-neutral-700: var(--color-gray-700);
  --color-neutral-600: var(--color-gray-600);
  --color-neutral-500: var(--color-gray-500);
  --color-neutral-400: var(--color-gray-400);
  --color-neutral-300: var(--color-gray-300);
  --color-neutral-200: var(--color-gray-200);
  --color-neutral-100: var(--color-gray-100);
  --color-neutral-50: var(--color-gray-50);
  --color-neutral-0: var(--color-gray-0);
  --color-neutral-alpha: var(--color-gray-alpha);

  /* AlignUI Dynamic Primary Colors */
  --color-primary-dark: var(--color-blue-800);
  --color-primary-darker: var(--color-blue-700);
  --color-primary-base: var(--color-blue-500);
  --color-primary-light: var(--color-blue-100);
  --color-primary-lighter: var(--color-blue-50);
  --color-primary-alpha: var(--color-blue-alpha);

  /* AlignUI Social Colors */
  --color-social-apple: #000;
  --color-social-twitter: #010101;
  --color-social-github: #24292f;
  --color-social-notion: #1e2226;
  --color-social-tidal: #000;
  --color-social-amazon: #353e47;
  --color-social-zendesk: #16140d;

  /* AlignUI Overlay Colors */
  --color-overlay-gray: #3333333d;
  --color-overlay-slate: #2b303b3d;
  --color-overlay: var(--color-overlay-gray);

  /* AlignUI Semantic Colors */
  --color-static-black: var(--color-neutral-950);
  --color-static-white: var(--color-neutral-0);

  --color-bg-strong-950: var(--color-neutral-950);
  --color-bg-surface-800: var(--color-neutral-800);
  --color-bg-sub-300: var(--color-neutral-300);
  --color-bg-soft-200: var(--color-neutral-200);
  --color-bg-weak-50: var(--color-neutral-50);
  --color-bg-weak-25: var(--color-neutral-50);
  --color-bg-white-0: var(--color-neutral-0);

  --color-text-strong-950: var(--color-neutral-950);
  --color-text-sub-600: var(--color-neutral-600);
  --color-text-soft-400: var(--color-neutral-400);
  --color-text-disabled-300: var(--color-neutral-300);
  --color-text-white-0: var(--color-neutral-0);

  --color-stroke-strong-950: var(--color-neutral-950);
  --color-stroke-sub-300: var(--color-neutral-300);
  --color-stroke-soft-200: var(--color-neutral-200);
  --color-stroke-white-0: var(--color-neutral-0);

  --color-faded-dark: var(--color-neutral-800);
  --color-faded-base: var(--color-neutral-500);
  --color-faded-light: var(--color-neutral-200);
  --color-faded-lighter: var(--color-neutral-100);

  --color-information-dark: var(--color-blue-950);
  --color-information-base: var(--color-blue-500);
  --color-information-light: var(--color-blue-200);
  --color-information-lighter: var(--color-blue-50);

  --color-warning-dark: var(--color-orange-950);
  --color-warning-base: var(--color-orange-500);
  --color-warning-light: var(--color-orange-200);
  --color-warning-lighter: var(--color-orange-50);

  --color-error-dark: var(--color-red-950);
  --color-error-base: var(--color-red-500);
  --color-error-light: var(--color-red-200);
  --color-error-lighter: var(--color-red-50);

  --color-success-dark: var(--color-green-950);
  --color-success-base: var(--color-green-500);
  --color-success-light: var(--color-green-200);
  --color-success-lighter: var(--color-green-50);

  --color-away-dark: var(--color-yellow-950);
  --color-away-base: var(--color-yellow-500);
  --color-away-light: var(--color-yellow-200);
  --color-away-lighter: var(--color-yellow-50);

  --color-feature-dark: var(--color-purple-950);
  --color-feature-base: var(--color-purple-500);
  --color-feature-light: var(--color-purple-200);
  --color-feature-lighter: var(--color-purple-50);

  --color-verified-dark: var(--color-sky-950);
  --color-verified-base: var(--color-sky-500);
  --color-verified-light: var(--color-sky-200);
  --color-verified-lighter: var(--color-sky-50);

  --color-highlighted-dark: var(--color-pink-950);
  --color-highlighted-base: var(--color-pink-500);
  --color-highlighted-light: var(--color-pink-200);
  --color-highlighted-lighter: var(--color-pink-50);

  --color-stable-dark: var(--color-teal-950);
  --color-stable-base: var(--color-teal-500);
  --color-stable-light: var(--color-teal-200);
  --color-stable-lighter: var(--color-teal-50);

  --color-illustration-white-0: var(--color-neutral-0);
  --color-illustration-weak-100: var(--color-neutral-100);
  --color-illustration-soft-200: var(--color-neutral-200);
  --color-illustration-sub-300: var(--color-neutral-300);
  --color-illustration-strong-400: var(--color-neutral-400);

  /* AlignUI Typography System - Dynamic from tokens.ts */

  --text-title-h1: 3.5rem;
  --text-title-h1--line-height: 4rem;
  --text-title-h1--letter-spacing: -0.01em;
  --text-title-h1--font-weight: 500;

  --text-title-h2: 3rem;
  --text-title-h2--line-height: 3.5rem;
  --text-title-h2--letter-spacing: -0.01em;
  --text-title-h2--font-weight: 500;

  --text-title-h3: 2.5rem;
  --text-title-h3--line-height: 3rem;
  --text-title-h3--letter-spacing: -0.01em;
  --text-title-h3--font-weight: 500;

  --text-title-h4: 2rem;
  --text-title-h4--line-height: 2.5rem;
  --text-title-h4--letter-spacing: -0.005em;
  --text-title-h4--font-weight: 500;

  --text-title-h5: 1.5rem;
  --text-title-h5--line-height: 2rem;
  --text-title-h5--letter-spacing: 0em;
  --text-title-h5--font-weight: 500;

  --text-title-h6: 1.25rem;
  --text-title-h6--line-height: 1.75rem;
  --text-title-h6--letter-spacing: 0em;
  --text-title-h6--font-weight: 500;

  --text-label-xl: 1.5rem;
  --text-label-xl--line-height: 2rem;
  --text-label-xl--letter-spacing: -0.015em;
  --text-label-xl--font-weight: 500;

  --text-label-lg: 1.125rem;
  --text-label-lg--line-height: 1.5rem;
  --text-label-lg--letter-spacing: -0.015em;
  --text-label-lg--font-weight: 500;

  --text-label-md: 1rem;
  --text-label-md--line-height: 1.5rem;
  --text-label-md--letter-spacing: -0.011em;
  --text-label-md--font-weight: 500;

  --text-label-sm: 0.875rem;
  --text-label-sm--line-height: 1.25rem;
  --text-label-sm--letter-spacing: -0.006em;
  --text-label-sm--font-weight: 500;

  --text-label-xs: 0.75rem;
  --text-label-xs--line-height: 1rem;
  --text-label-xs--letter-spacing: 0em;
  --text-label-xs--font-weight: 500;

  --text-label-2xs: 0.6875rem;
  --text-label-2xs--line-height: 1rem;
  --text-label-2xs--letter-spacing: 0em;
  --text-label-2xs--font-weight: 500;

  --text-paragraph-xl: 1.5rem;
  --text-paragraph-xl--line-height: 2rem;
  --text-paragraph-xl--letter-spacing: -0.015em;
  --text-paragraph-xl--font-weight: 400;

  --text-paragraph-lg: 1.125rem;
  --text-paragraph-lg--line-height: 1.5rem;
  --text-paragraph-lg--letter-spacing: -0.015em;
  --text-paragraph-lg--font-weight: 400;

  --text-paragraph-md: 1rem;
  --text-paragraph-md--line-height: 1.5rem;
  --text-paragraph-md--letter-spacing: -0.011em;
  --text-paragraph-md--font-weight: 400;

  --text-paragraph-sm: 0.875rem;
  --text-paragraph-sm--line-height: 1.25rem;
  --text-paragraph-sm--letter-spacing: -0.006em;
  --text-paragraph-sm--font-weight: 400;

  --text-paragraph-xs: 0.75rem;
  --text-paragraph-xs--line-height: 1rem;
  --text-paragraph-xs--letter-spacing: 0em;
  --text-paragraph-xs--font-weight: 400;

  --text-subheading-md: 1rem;
  --text-subheading-md--line-height: 1.5rem;
  --text-subheading-md--letter-spacing: 0.06em;
  --text-subheading-md--font-weight: 500;

  --text-subheading-sm: 0.875rem;
  --text-subheading-sm--line-height: 1.25rem;
  --text-subheading-sm--letter-spacing: 0.06em;
  --text-subheading-sm--font-weight: 500;

  --text-subheading-xs: 0.75rem;
  --text-subheading-xs--line-height: 1rem;
  --text-subheading-xs--letter-spacing: 0.04em;
  --text-subheading-xs--font-weight: 500;

  --text-subheading-2xs: 0.6875rem;
  --text-subheading-2xs--line-height: 0.75rem;
  --text-subheading-2xs--letter-spacing: 0.02em;
  --text-subheading-2xs--font-weight: 500;

  --text-doc-label: 1.125rem;
  --text-doc-label--line-height: 2rem;
  --text-doc-label--letter-spacing: -0.015em;
  --text-doc-label--font-weight: 500;

  --text-doc-paragraph: 1.125rem;
  --text-doc-paragraph--line-height: 2rem;
  --text-doc-paragraph--letter-spacing: -0.015em;
  --text-doc-paragraph--font-weight: 400;

  /* AlignUI Shadow System - Dynamic from tokens.ts */

  --shadow-regular-xs: 0 1px 2px 0 #0a0d1408;

  --shadow-regular-sm: 0 2px 4px #1b1c1d0a;

  --shadow-regular-md: 0 16px 32px -12px #0e121b1a;

  --shadow-button-primary-focus: 0 0 0 2px var(--color-bg-white-0),
    0 0 0 4px color-mix(in srgb, var(--color-primary-alpha) 10%, transparent);

  --shadow-button-important-focus: 0 0 0 2px var(--color-bg-white-0),
    0 0 0 4px color-mix(in srgb, var(--color-neutral-alpha) 16%, transparent);

  --shadow-button-error-focus: 0 0 0 2px var(--color-bg-white-0),
    0 0 0 4px color-mix(in srgb, var(--color-red-alpha) 10%, transparent);

  --shadow-fancy-buttons-neutral: 0 1px 2px 0 #1b1c1d7a, 0 0 0 1px #242628;

  --shadow-fancy-buttons-primary: 0 1px 2px 0 #0e121b3d,
    0 0 0 1px var(--color-primary-base);

  --shadow-fancy-buttons-error: 0 1px 2px 0 #0e121b3d,
    0 0 0 1px var(--color-error-base);

  --shadow-fancy-buttons-stroke: 0 1px 3px 0 #0e121b1f,
    0 0 0 1px var(--color-stroke-soft-200);

  --shadow-toggle-switch: 0 6px 10px 0 #0e121b0f, 0 2px 4px 0 #0e121b08;

  --shadow-switch-thumb: 0 4px 8px 0 #1b1c1d0f, 0 2px 4px 0 #0e121b14;

  --shadow-tooltip: 0 12px 24px 0 #0e121b0f, 0 1px 2px 0 #0e121b08;

  --shadow-custom-xs: 0 0 0 1px rgba(51, 51, 51, 0.04),
    0 4px 8px -2px rgba(51, 51, 51, 0.06), 0 2px 4px rgba(51, 51, 51, 0.04),
    0 1px 2px rgba(51, 51, 51, 0.04),
    inset 0 -1px 1px -0.5px rgba(51, 51, 51, 0.06);

  --shadow-custom-sm: 0 0 0 1px rgba(51, 51, 51, 0.04),
    0 16px 8px -8px rgba(51, 51, 51, 0.01),
    0 12px 6px -6px rgba(51, 51, 51, 0.02),
    0 5px 5px -2.5px rgba(51, 51, 51, 0.08),
    0 1px 3px -1.5px rgba(51, 51, 51, 0.16),
    inset 0 -0.5px 0.5px rgba(51, 51, 51, 0.08);

  --shadow-custom-md: 0 0 0 1px rgba(51, 51, 51, 0.04),
    0 1px 1px 0.5px rgba(51, 51, 51, 0.04),
    0 3px 3px -1.5px rgba(51, 51, 51, 0.02),
    0 6px 6px -3px rgba(51, 51, 51, 0.04),
    0 12px 12px -6px rgba(51, 51, 51, 0.04),
    0 24px 24px -12px rgba(51, 51, 51, 0.04),
    0 48px 48px -24px rgba(51, 51, 51, 0.04),
    inset 0 -1px 1px -0.5px rgba(51, 51, 51, 0.06);

  --shadow-custom-lg: 0 0 0 1px rgba(51, 51, 51, 0.04),
    0 1px 1px 0.5px rgba(51, 51, 51, 0.04),
    0 3px 3px -1.5px rgba(51, 51, 51, 0.02),
    0 6px 6px -3px rgba(51, 51, 51, 0.04),
    0 12px 12px -6px rgba(51, 51, 51, 0.04),
    0 24px 24px -12px rgba(51, 51, 51, 0.04),
    0 48px 48px -24px rgba(51, 51, 51, 0.04),
    0 96px 96px -32px rgba(51, 51, 51, 0.06),
    inset 0 -1px 1px -0.5px rgba(51, 51, 51, 0.06);

  /* AlignUI Block Shadow System */

  --shadow-complex-12: 0 80px 80px -40px rgba(23, 23, 23, 0.04),
    0 48px 48px -24px rgba(23, 23, 23, 0.04);

  --shadow-complex: 0 20px 20px -10px rgba(23, 23, 23, 0.04),
    0 10px 10px -5px rgba(23, 23, 23, 0.04),
    0 6px 6px -3px rgba(23, 23, 23, 0.04),
    0 3px 3px -1.5px rgba(23, 23, 23, 0.04),
    0 1px 1px -0.5px rgba(23, 23, 23, 0.04), 0 0 0 1px rgba(23, 23, 23, 0.08),
    0 -1px 1px -0.5px rgba(23, 23, 23, 0.06) inset;

  --shadow-complex-2: 0 10px 10px -5px rgba(23, 23, 23, 0.02),
    0 6px 6px -3px rgba(23, 23, 23, 0.04),
    0 3px 3px -1.5px rgba(23, 23, 23, 0.04),
    0 1px 1px -0.5px rgba(23, 23, 23, 0.04), 0 0 0 1px rgba(23, 23, 23, 0.02);

  --shadow-complex-4: 0 3px 3px -1.5px rgba(23, 23, 23, 0.04),
    0 1px 1px -0.5px rgba(23, 23, 23, 0.04), 0 0 0 1px rgba(23, 23, 23, 0.02);

  --shadow-complex-5: 0 0 6px 0 rgba(255, 255, 255, 0.24) inset,
    0 40px 40px -20px rgba(23, 23, 23, 0.06),
    0 10px 10px -5px rgba(23, 23, 23, 0.06),
    0 6px 6px -3px rgba(23, 23, 23, 0.04),
    0 3px 3px -1.5px rgba(23, 23, 23, 0.04),
    0 1px 1px -0.5px rgba(23, 23, 23, 0.04);

  --shadow-complex-6: 0 40px 40px -20px rgba(23, 23, 23, 0.06),
    0 10px 10px -5px rgba(23, 23, 23, 0.06),
    0 6px 6px -3px rgba(23, 23, 23, 0.04),
    0 3px 3px -1.5px rgba(23, 23, 23, 0.04),
    0 1px 1px -0.5px rgba(23, 23, 23, 0.04),
    0 0 6px 0 rgba(255, 255, 255, 0.24) inset;

  --shadow-complex-7: 0 1px 2px 0 rgba(14, 18, 27, 0.24), 0 0 0 1px #335cff;

  --shadow-complex-8: 0 20px 20px -10px rgba(23, 23, 23, 0),
    0 10px 10px -5px rgba(23, 23, 23, 0), 0 6px 6px -3px rgba(23, 23, 23, 0),
    0 3px 3px -1.5px rgba(23, 23, 23, 0), 0 1px 1px -0.5px rgba(23, 23, 23, 0),
    0 0 0 1px rgba(23, 23, 23, 0.08),
    0 -1px 1px -0.5px rgba(23, 23, 23, 0.06) inset;

  --shadow-complex-9: 0 80px 40px -20px rgba(23, 23, 23, 0.06),
    0 40px 40px -20px rgba(23, 23, 23, 0.06),
    0 10px 10px -5px rgba(23, 23, 23, 0.06),
    0 6px 6px -3px rgba(23, 23, 23, 0.04),
    0 3px 3px -1.5px rgba(23, 23, 23, 0.04),
    0 1px 1px -0.5px rgba(23, 23, 23, 0.04),
    0 0 6px 0 rgba(255, 255, 255, 0.04) inset;

  --shadow-complex-10: 0 3px 3px -1.5px rgba(23, 23, 23, 0.04),
    0 1px 1px -0.5px rgba(23, 23, 23, 0.04);

  --shadow-complex-11: 0 -1px 1px -0.5px rgba(23, 23, 23, 0.06) inset,
    0 20px 20px -10px rgba(23, 23, 23, 0.04),
    0 10px 10px -5px rgba(23, 23, 23, 0.04),
    0 6px 6px -3px rgba(23, 23, 23, 0.04),
    0 3px 3px -1.5px rgba(23, 23, 23, 0.04),
    0 1px 1px -0.5px rgba(23, 23, 23, 0.04), 0 0 0 1px rgba(23, 23, 23, 0.04);

  --shadow-custom-input: 0 3px 3px -1.5px rgba(23, 23, 23, 0.04),
    0 1px 1px -0.5px rgba(23, 23, 23, 0.04), 0 0 0 1px rgba(23, 23, 23, 0.08);

  --shadow-custom-input-2: 0 3px 3px -1.5px rgba(23, 23, 23, 0.04),
    0 1px 1px -0.5px rgba(23, 23, 23, 0.04), 0 0 0 1px var(--color-bg-soft-200);

  --shadow-custom-input-4: 0 3px 3px -1.5px rgba(23, 23, 23, 0.06),
    0 1px 1px -0.5px rgba(23, 23, 23, 0.06), 0 0 0 1px rgba(23, 23, 23, 0.02);

  --shadow-custom-input-active: 0 6px 6px -3px rgba(23, 23, 23, 0.02),
    0 3px 3px -1.5px rgba(23, 23, 23, 0.04),
    0 1px 1px -0.5px rgba(23, 23, 23, 0.04), 0 0 0 1.4px #335cff;

  --shadow-gray-shadow: 0 0 0 1px rgba(23, 23, 23, 0.08);

  /* AlignUI Border Radius System - Dynamic from tokens.ts */

  --radius-10: 0.625rem;

  --radius-20: 1.25rem;

  /* AlignUI Animation System - Dynamic from tokens.ts */

  --animate-accordion-down: accordion-down 0.2s ease-out;

  --animate-accordion-up: accordion-up 0.2s ease-out;
}

/* Class-based Dark Mode Support (controlled by next-themes) */
.dark {
  --color-bg-strong-950: var(--color-neutral-0);
  --color-bg-surface-800: var(--color-neutral-200);
  --color-bg-sub-300: var(--color-neutral-600);
  --color-bg-soft-200: var(--color-neutral-700);
  --color-bg-weak-50: var(--color-neutral-800);
  --color-bg-weak-25: var(--color-neutral-900);
  --color-bg-white-0: var(--color-neutral-950);

  --color-text-strong-950: var(--color-neutral-0);
  --color-text-sub-600: var(--color-neutral-400);
  --color-text-soft-400: var(--color-neutral-500);
  --color-text-disabled-300: var(--color-neutral-600);
  --color-text-white-0: var(--color-neutral-950);

  --color-stroke-strong-950: var(--color-neutral-0);
  --color-stroke-sub-300: var(--color-neutral-600);
  --color-stroke-soft-200: var(--color-neutral-800);
  --color-stroke-white-0: var(--color-neutral-950);

  --color-faded-dark: var(--color-neutral-300);
  --color-faded-base: var(--color-neutral-500);
  --color-faded-light: color-mix(
    in srgb,
    var(--color-neutral-alpha) 24%,
    transparent
  );
  --color-faded-lighter: color-mix(
    in srgb,
    var(--color-neutral-alpha) 10%,
    transparent
  );

  --color-information-dark: var(--color-blue-400);
  --color-information-base: var(--color-blue-500);
  --color-information-light: color-mix(
    in srgb,
    var(--color-blue-alpha) 24%,
    transparent
  );
  --color-information-lighter: color-mix(
    in srgb,
    var(--color-blue-alpha) 16%,
    transparent
  );

  --color-warning-dark: var(--color-orange-400);
  --color-warning-base: var(--color-orange-600);
  --color-warning-light: color-mix(
    in srgb,
    var(--color-orange-alpha) 24%,
    transparent
  );
  --color-warning-lighter: color-mix(
    in srgb,
    var(--color-orange-alpha) 16%,
    transparent
  );

  --color-error-dark: var(--color-red-400);
  --color-error-base: var(--color-red-600);
  --color-error-light: color-mix(
    in srgb,
    var(--color-red-alpha) 24%,
    transparent
  );
  --color-error-lighter: color-mix(
    in srgb,
    var(--color-red-alpha) 16%,
    transparent
  );

  --color-success-dark: var(--color-green-400);
  --color-success-base: var(--color-green-600);
  --color-success-light: color-mix(
    in srgb,
    var(--color-green-alpha) 16%,
    transparent
  );
  --color-success-lighter: color-mix(
    in srgb,
    var(--color-green-alpha) 10%,
    transparent
  );

  --color-away-dark: var(--color-yellow-400);
  --color-away-base: var(--color-yellow-600);
  --color-away-light: color-mix(
    in srgb,
    var(--color-yellow-alpha) 24%,
    transparent
  );
  --color-away-lighter: color-mix(
    in srgb,
    var(--color-yellow-alpha) 16%,
    transparent
  );

  --color-feature-dark: var(--color-purple-400);
  --color-feature-base: var(--color-purple-500);
  --color-feature-light: color-mix(
    in srgb,
    var(--color-purple-alpha) 24%,
    transparent
  );
  --color-feature-lighter: color-mix(
    in srgb,
    var(--color-purple-alpha) 16%,
    transparent
  );

  --color-verified-dark: var(--color-sky-400);
  --color-verified-base: var(--color-sky-600);
  --color-verified-light: color-mix(
    in srgb,
    var(--color-sky-alpha) 24%,
    transparent
  );
  --color-verified-lighter: color-mix(
    in srgb,
    var(--color-sky-alpha) 16%,
    transparent
  );

  --color-highlighted-dark: var(--color-pink-400);
  --color-highlighted-base: var(--color-pink-600);
  --color-highlighted-light: color-mix(
    in srgb,
    var(--color-pink-alpha) 24%,
    transparent
  );
  --color-highlighted-lighter: color-mix(
    in srgb,
    var(--color-pink-alpha) 16%,
    transparent
  );

  --color-stable-dark: var(--color-teal-400);
  --color-stable-base: var(--color-teal-600);
  --color-stable-light: color-mix(
    in srgb,
    var(--color-teal-alpha) 24%,
    transparent
  );
  --color-stable-lighter: color-mix(
    in srgb,
    var(--color-teal-alpha) 16%,
    transparent
  );

  --color-illustration-white-0: var(--color-neutral-950);
  --color-illustration-weak-100: var(--color-neutral-900);
  --color-illustration-soft-200: var(--color-neutral-800);
  --color-illustration-sub-300: var(--color-neutral-700);
  --color-illustration-strong-400: var(--color-neutral-600);

  --color-primary-base: var(--color-blue-400);
  --color-primary-light: color-mix(
    in srgb,
    var(--color-blue-alpha) 16%,
    transparent
  );
  --color-primary-lighter: color-mix(
    in srgb,
    var(--color-blue-alpha) 10%,
    transparent
  );

  --color-overlay-gray: #3333338f;
  --color-overlay-slate: #2b303b8f;
  --color-overlay: var(--color-overlay-gray);

  --color-social-apple: #fff;
  --color-social-twitter: #fff;
  --color-social-github: #fff;
  --color-social-notion: #fff;
  --color-social-tidal: #fff;
  --color-social-amazon: #fff;
  --color-social-zendesk: #fff;

  --shadow-complex-12: 0 80px 80px -40px rgba(23, 23, 23, 0),
    0 48px 48px -24px rgba(23, 23, 23, 0);

  --shadow-complex: 0 20px 20px -10px rgba(23, 23, 23, 0),
    0 10px 10px -5px rgba(23, 23, 23, 0), 0 6px 6px -3px rgba(23, 23, 23, 0),
    0 3px 3px -1.5px rgba(23, 23, 23, 0), 0 1px 1px -0.5px rgba(23, 23, 23, 0),
    0 0 0 1px #262626, 0 -1px 1px -0.5px rgba(23, 23, 23, 0.04) inset;

  --shadow-complex-2: 0 10px 10px -5px rgba(23, 23, 23, 0),
    0 6px 6px -3px rgba(23, 23, 23, 0), 0 3px 3px -1.5px rgba(23, 23, 23, 0),
    0 1px 1px -0.5px rgba(23, 23, 23, 0), 0 0 0 1px rgba(23, 23, 23, 0);

  --shadow-complex-4: 0 3px 3px -1.5px rgba(23, 23, 23, 0.04),
    0 1px 1px -0.5px rgba(23, 23, 23, 0.04), 0 0 0 1px rgba(23, 23, 23, 0.02);

  --shadow-complex-5: 0 0 6px 0 rgba(255, 255, 255, 0.24) inset,
    0 40px 40px -20px rgba(23, 23, 23, 0.04),
    0 10px 10px -5px rgba(23, 23, 23, 0.04), 0 6px 6px -3px rgba(23, 23, 23, 0),
    0 3px 3px -1.5px rgba(23, 23, 23, 0), 0 1px 1px -0.5px rgba(23, 23, 23, 0);

  --shadow-complex-6: 0 40px 40px -20px rgba(23, 23, 23, 0.04),
    0 10px 10px -5px rgba(23, 23, 23, 0.04), 0 6px 6px -3px rgba(23, 23, 23, 0),
    0 3px 3px -1.5px rgba(23, 23, 23, 0), 0 1px 1px -0.5px rgba(23, 23, 23, 0),
    0 0 6px 0 rgba(255, 255, 255, 0.24) inset;

  --shadow-complex-7: 0 1px 2px 0 rgba(14, 18, 27, 0.24), 0 0 0 1px #4d82ff;

  --shadow-complex-8: 0 20px 20px -10px rgba(23, 23, 23, 0.04),
    0 10px 10px -5px rgba(23, 23, 23, 0.04),
    0 6px 6px -3px rgba(23, 23, 23, 0.04),
    0 3px 3px -1.5px rgba(23, 23, 23, 0.04),
    0 1px 1px -0.5px rgba(23, 23, 23, 0.04), 0 0 0 1px rgba(23, 23, 23, 0.08),
    0 -1px 1px -0.5px rgba(23, 23, 23, 0.06) inset;

  --shadow-complex-9: 0 80px 40px -20px rgba(23, 23, 23, 0.04),
    0 40px 40px -20px rgba(23, 23, 23, 0.04),
    0 10px 10px -5px rgba(23, 23, 23, 0.04), 0 6px 6px -3px rgba(23, 23, 23, 0),
    0 3px 3px -1.5px rgba(23, 23, 23, 0), 0 1px 1px -0.5px rgba(23, 23, 23, 0),
    0 0 6px 0 rgba(255, 255, 255, 0.04) inset;

  --shadow-complex-10: 0 3px 3px -1.5px rgba(23, 23, 23, 0),
    0 1px 1px -0.5px rgba(23, 23, 23, 0);

  --shadow-complex-11: 0 -1px 1px -0.5px rgba(23, 23, 23, 0.04) inset,
    0 20px 20px -10px rgba(23, 23, 23, 0), 0 10px 10px -5px rgba(23, 23, 23, 0),
    0 6px 6px -3px rgba(23, 23, 23, 0), 0 3px 3px -1.5px rgba(23, 23, 23, 0),
    0 1px 1px -0.5px rgba(23, 23, 23, 0), 0 0 0 1px rgba(23, 23, 23, 0);

  --shadow-custom-input: 0 3px 3px -1.5px rgba(23, 23, 23, 0),
    0 1px 1px -0.5px rgba(23, 23, 23, 0), 0 0 0 1px #262626;

  --shadow-custom-input-2: 0 3px 3px -1.5px rgba(23, 23, 23, 0),
    0 1px 1px -0.5px rgba(23, 23, 23, 0), 0 0 0 1px #262626;

  --shadow-custom-input-4: 0 3px 3px -1.5px rgba(23, 23, 23, 0.04),
    0 1px 1px -0.5px rgba(23, 23, 23, 0.04), 0 0 0 1px rgba(23, 23, 23, 0);

  --shadow-custom-input-active: 0 6px 6px -3px rgba(23, 23, 23, 0.02),
    0 3px 3px -1.5px rgba(23, 23, 23, 0.04),
    0 1px 1px -0.5px rgba(23, 23, 23, 0.04), 0 0 0 1.4px #335cff;

  --shadow-gray-shadow: 0 0 0 1px #262626;
}

/* Class-based Dark Mode Support (controlled by next-themes) */
.dark {
  --color-bg-strong-950: var(--color-neutral-0);
  --color-bg-surface-800: var(--color-neutral-200);
  --color-bg-sub-300: var(--color-neutral-600);
  --color-bg-soft-200: var(--color-neutral-700);
  --color-bg-weak-50: var(--color-neutral-800);
  --color-bg-weak-25: var(--color-neutral-900);
  --color-bg-white-0: var(--color-neutral-950);

  --color-text-strong-950: var(--color-neutral-0);
  --color-text-sub-600: var(--color-neutral-400);
  --color-text-soft-400: var(--color-neutral-500);
  --color-text-disabled-300: var(--color-neutral-600);
  --color-text-white-0: var(--color-neutral-950);

  --color-stroke-strong-950: var(--color-neutral-0);
  --color-stroke-sub-300: var(--color-neutral-600);
  --color-stroke-soft-200: var(--color-neutral-800);
  --color-stroke-white-0: var(--color-neutral-950);

  --color-faded-dark: var(--color-neutral-300);
  --color-faded-base: var(--color-neutral-500);
  --color-faded-light: color-mix(
    in srgb,
    var(--color-neutral-alpha) 24%,
    transparent
  );
  --color-faded-lighter: color-mix(
    in srgb,
    var(--color-neutral-alpha) 10%,
    transparent
  );

  --color-information-dark: var(--color-blue-400);
  --color-information-base: var(--color-blue-500);
  --color-information-light: color-mix(
    in srgb,
    var(--color-blue-alpha) 24%,
    transparent
  );
  --color-information-lighter: color-mix(
    in srgb,
    var(--color-blue-alpha) 16%,
    transparent
  );

  --color-warning-dark: var(--color-orange-400);
  --color-warning-base: var(--color-orange-600);
  --color-warning-light: color-mix(
    in srgb,
    var(--color-orange-alpha) 24%,
    transparent
  );
  --color-warning-lighter: color-mix(
    in srgb,
    var(--color-orange-alpha) 16%,
    transparent
  );

  --color-error-dark: var(--color-red-400);
  --color-error-base: var(--color-red-600);
  --color-error-light: color-mix(
    in srgb,
    var(--color-red-alpha) 24%,
    transparent
  );
  --color-error-lighter: color-mix(
    in srgb,
    var(--color-red-alpha) 16%,
    transparent
  );

  --color-success-dark: var(--color-green-400);
  --color-success-base: var(--color-green-600);
  --color-success-light: color-mix(
    in srgb,
    var(--color-green-alpha) 16%,
    transparent
  );
  --color-success-lighter: color-mix(
    in srgb,
    var(--color-green-alpha) 10%,
    transparent
  );

  --color-away-dark: var(--color-yellow-400);
  --color-away-base: var(--color-yellow-600);
  --color-away-light: color-mix(
    in srgb,
    var(--color-yellow-alpha) 24%,
    transparent
  );
  --color-away-lighter: color-mix(
    in srgb,
    var(--color-yellow-alpha) 16%,
    transparent
  );

  --color-feature-dark: var(--color-purple-400);
  --color-feature-base: var(--color-purple-500);
  --color-feature-light: color-mix(
    in srgb,
    var(--color-purple-alpha) 24%,
    transparent
  );
  --color-feature-lighter: color-mix(
    in srgb,
    var(--color-purple-alpha) 16%,
    transparent
  );

  --color-verified-dark: var(--color-sky-400);
  --color-verified-base: var(--color-sky-600);
  --color-verified-light: color-mix(
    in srgb,
    var(--color-sky-alpha) 24%,
    transparent
  );
  --color-verified-lighter: color-mix(
    in srgb,
    var(--color-sky-alpha) 16%,
    transparent
  );

  --color-highlighted-dark: var(--color-pink-400);
  --color-highlighted-base: var(--color-pink-600);
  --color-highlighted-light: color-mix(
    in srgb,
    var(--color-pink-alpha) 24%,
    transparent
  );
  --color-highlighted-lighter: color-mix(
    in srgb,
    var(--color-pink-alpha) 16%,
    transparent
  );

  --color-stable-dark: var(--color-teal-400);
  --color-stable-base: var(--color-teal-600);
  --color-stable-light: color-mix(
    in srgb,
    var(--color-teal-alpha) 24%,
    transparent
  );
  --color-stable-lighter: color-mix(
    in srgb,
    var(--color-teal-alpha) 16%,
    transparent
  );

  --color-primary-base: var(--color-blue-400);
  --color-primary-light: color-mix(
    in srgb,
    var(--color-blue-alpha) 16%,
    transparent
  );
  --color-primary-lighter: color-mix(
    in srgb,
    var(--color-blue-alpha) 10%,
    transparent
  );

  --color-overlay-gray: #3333338f;
  --color-overlay-slate: #2b303b8f;
  --color-overlay: var(--color-overlay-gray);

  --color-social-apple: #fff;
  --color-social-twitter: #fff;
  --color-social-github: #fff;
  --color-social-notion: #fff;
  --color-social-tidal: #fff;
  --color-social-amazon: #fff;
  --color-social-zendesk: #fff;

  --shadow-complex-12: 0 80px 80px -40px rgba(23, 23, 23, 0),
    0 48px 48px -24px rgba(23, 23, 23, 0);

  --shadow-complex: 0 20px 20px -10px rgba(23, 23, 23, 0),
    0 10px 10px -5px rgba(23, 23, 23, 0), 0 6px 6px -3px rgba(23, 23, 23, 0),
    0 3px 3px -1.5px rgba(23, 23, 23, 0), 0 1px 1px -0.5px rgba(23, 23, 23, 0),
    0 0 0 1px #262626, 0 -1px 1px -0.5px rgba(23, 23, 23, 0.04) inset;

  --shadow-complex-2: 0 10px 10px -5px rgba(23, 23, 23, 0),
    0 6px 6px -3px rgba(23, 23, 23, 0), 0 3px 3px -1.5px rgba(23, 23, 23, 0),
    0 1px 1px -0.5px rgba(23, 23, 23, 0), 0 0 0 1px rgba(23, 23, 23, 0);

  --shadow-complex-4: 0 3px 3px -1.5px rgba(23, 23, 23, 0.04),
    0 1px 1px -0.5px rgba(23, 23, 23, 0.04), 0 0 0 1px rgba(23, 23, 23, 0.02);

  --shadow-complex-5: 0 0 6px 0 rgba(255, 255, 255, 0.24) inset,
    0 40px 40px -20px rgba(23, 23, 23, 0.04),
    0 10px 10px -5px rgba(23, 23, 23, 0.04), 0 6px 6px -3px rgba(23, 23, 23, 0),
    0 3px 3px -1.5px rgba(23, 23, 23, 0), 0 1px 1px -0.5px rgba(23, 23, 23, 0);

  --shadow-complex-6: 0 40px 40px -20px rgba(23, 23, 23, 0.04),
    0 10px 10px -5px rgba(23, 23, 23, 0.04), 0 6px 6px -3px rgba(23, 23, 23, 0),
    0 3px 3px -1.5px rgba(23, 23, 23, 0), 0 1px 1px -0.5px rgba(23, 23, 23, 0),
    0 0 6px 0 rgba(255, 255, 255, 0.24) inset;

  --shadow-complex-7: 0 1px 2px 0 rgba(14, 18, 27, 0.24), 0 0 0 1px #4d82ff;

  --shadow-complex-8: 0 20px 20px -10px rgba(23, 23, 23, 0.04),
    0 10px 10px -5px rgba(23, 23, 23, 0.04),
    0 6px 6px -3px rgba(23, 23, 23, 0.04),
    0 3px 3px -1.5px rgba(23, 23, 23, 0.04),
    0 1px 1px -0.5px rgba(23, 23, 23, 0.04), 0 0 0 1px rgba(23, 23, 23, 0.08),
    0 -1px 1px -0.5px rgba(23, 23, 23, 0.06) inset;

  --shadow-complex-9: 0 80px 40px -20px rgba(23, 23, 23, 0.04),
    0 40px 40px -20px rgba(23, 23, 23, 0.04),
    0 10px 10px -5px rgba(23, 23, 23, 0.04), 0 6px 6px -3px rgba(23, 23, 23, 0),
    0 3px 3px -1.5px rgba(23, 23, 23, 0), 0 1px 1px -0.5px rgba(23, 23, 23, 0),
    0 0 6px 0 rgba(255, 255, 255, 0.04) inset;

  --shadow-complex-10: 0 3px 3px -1.5px rgba(23, 23, 23, 0),
    0 1px 1px -0.5px rgba(23, 23, 23, 0);

  --shadow-complex-11: 0 -1px 1px -0.5px rgba(23, 23, 23, 0.04) inset,
    0 20px 20px -10px rgba(23, 23, 23, 0), 0 10px 10px -5px rgba(23, 23, 23, 0),
    0 6px 6px -3px rgba(23, 23, 23, 0), 0 3px 3px -1.5px rgba(23, 23, 23, 0),
    0 1px 1px -0.5px rgba(23, 23, 23, 0), 0 0 0 1px rgba(23, 23, 23, 0);

  --shadow-custom-input: 0 3px 3px -1.5px rgba(23, 23, 23, 0),
    0 1px 1px -0.5px rgba(23, 23, 23, 0), 0 0 0 1px #262626;

  --shadow-custom-input-2: 0 3px 3px -1.5px rgba(23, 23, 23, 0),
    0 1px 1px -0.5px rgba(23, 23, 23, 0), 0 0 0 1px #262626;

  --shadow-custom-input-4: 0 3px 3px -1.5px rgba(23, 23, 23, 0.04),
    0 1px 1px -0.5px rgba(23, 23, 23, 0.04), 0 0 0 1px rgba(23, 23, 23, 0);

  --shadow-custom-input-active: 0 6px 6px -3px rgba(23, 23, 23, 0.02),
    0 3px 3px -1.5px rgba(23, 23, 23, 0.04),
    0 1px 1px -0.5px rgba(23, 23, 23, 0.04), 0 0 0 1.4px #335cff;

  --shadow-gray-shadow: 0 0 0 1px #262626;
}

/* Keyframe Animations - AlignUI System */
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes ping {
  75%,
  100% {
    transform: scale(2);
    opacity: 0;
  }
}

@keyframes pulse {
  50% {
    opacity: 0.5;
  }
}

@keyframes bounce {
  0%,
  100% {
    transform: translateY(-25%);
    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
  }
  50% {
    transform: none;
    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }
}

@keyframes accordion-down {
  from {
    height: 0;
    opacity: 0;
  }
  to {
    height: var(--radix-accordion-content-height);
    opacity: 1;
  }
}

@keyframes accordion-up {
  from {
    height: var(--radix-accordion-content-height);
    opacity: 1;
  }
  to {
    height: 0;
    opacity: 0;
  }
}

@theme inline {
  --animate-marquee: marquee var(--duration) infinite linear;
  --animate-marquee-vertical: marquee-vertical var(--duration) linear infinite;

  @keyframes marquee {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(calc(-100% - var(--gap)));
    }
  }
  @keyframes marquee-vertical {
    from {
      transform: translateY(0);
    }
    to {
      transform: translateY(calc(-100% - var(--gap)));
    }
  }
}

/* AlignUI Body Styles */
body {
  background: var(--color-bg-white-0);
  color: var(--color-text-strong-950);
  font-family: Inter, Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
}