/* ============================================
   LOOP DESIGN SYSTEM - CSS CUSTOM PROPERTIES
   Extracted from Figma: Loop Design System
   Version: 1.0
   ============================================ */

:root {
  /* ===========================================
     COLOUR PRIMITIVES
     =========================================== */

  /* --- Neutral --- */
  --loop-neutral-1100: #151C28;
  --loop-neutral-1000: #29303D;
  --loop-neutral-900: #374152;
  --loop-neutral-800: #48556B;
  --loop-neutral-700: #626F86;
  --loop-neutral-600: #758195;
  --loop-neutral-500: #8590A2;
  --loop-neutral-400: #8389C4;
  --loop-neutral-300: #DCDFE4;
  --loop-neutral-200: #F1F2F4;
  --loop-neutral-100: #F7F8F9;
  --loop-neutral-0: #FFFFFF;

  /* Neutral Alpha */
  --loop-neutral-500a: rgba(21, 28, 40, 0.49);
  --loop-neutral-400a: rgba(21, 28, 40, 0.30);
  --loop-neutral-300a: rgba(21, 28, 40, 0.1412);
  --loop-neutral-200a: rgba(21, 28, 40, 0.0588);
  --loop-neutral-100a: rgba(21, 28, 40, 0.0314);

  /* --- Dark Neutral --- */
  --loop-dark-neutral-1100: #DEE4EA;
  --loop-dark-neutral-1000: #C7D1DB;
  --loop-dark-neutral-900: #86C2CF;
  --loop-dark-neutral-800: #9FADBC;
  --loop-dark-neutral-700: #8C98A8;
  --loop-dark-neutral-600: #738496;
  --loop-dark-neutral-500: #596773;
  --loop-dark-neutral-400: #454F59;
  --loop-dark-neutral-350: #38414A;
  --loop-dark-neutral-300: #2E363D;
  --loop-dark-neutral-250: #282E33;
  --loop-dark-neutral-200: #22272B;
  --loop-dark-neutral-100: #1D2125;
  --loop-dark-neutral-0: #161A1D;
  --loop-dark-neutral--100: #101214;

  /* Dark Neutral Alpha */
  --loop-dark-neutral-500a: rgba(152, 132, 202, 0.502);
  --loop-dark-neutral-400a: rgba(191, 216, 248, 0.27);
  --loop-dark-neutral-350a: rgba(195, 222, 254, 0.20);
  --loop-dark-neutral-300a: rgba(166, 197, 226, 0.16);
  --loop-dark-neutral-250a: rgba(200, 225, 249, 0.102);
  --loop-dark-neutral-200a: rgba(161, 141, 217, 0.0784);
  --loop-dark-neutral-100a: rgba(188, 214, 240, 0.0392);
  --loop-dark-neutral--100a: rgba(3, 4, 4, 0.25);

  /* --- Transparent --- */
  --loop-transparent-w-600: rgba(255, 255, 255, 0.5616);
  --loop-transparent-w-500: rgba(255, 255, 255, 0.48);
  --loop-transparent-w-400: rgba(255, 255, 255, 0.40);
  --loop-transparent-w-300: rgba(255, 255, 255, 0.32);
  --loop-transparent-w-200: rgba(255, 255, 255, 0.23);
  --loop-transparent-w-100: rgba(255, 255, 255, 0.16);
  --loop-transparent-w-0: rgba(255, 255, 255, 0);

  --loop-transparent-b-600: rgba(0, 0, 0, 0.5616);
  --loop-transparent-b-500: rgba(0, 0, 0, 0.48);
  --loop-transparent-b-400: rgba(0, 0, 0, 0.40);
  --loop-transparent-b-300: rgba(0, 0, 0, 0.32);
  --loop-transparent-b-200: rgba(0, 0, 0, 0.23);
  --loop-transparent-b-100: rgba(0, 0, 0, 0.16);
  --loop-transparent-b-0: rgba(0, 0, 0, 0);

  /* --- Brand --- */
  --loop-brand-1000: #120647;
  --loop-brand-900: #1B066F;
  --loop-brand-800: #2500B8;
  --loop-brand-700: #2E00E5;
  --loop-brand-600: #3F0FFF;
  --loop-brand-500: #604FFC;
  --loop-brand-400: #8985FF;
  --loop-brand-300: #9C99FF;
  --loop-brand-200: #CECCFF;
  --loop-brand-100: #F1F0FF;

  /* --- Blue --- */
  --loop-blue-1000: #052057;
  --loop-blue-900: #0D2B80;
  --loop-blue-800: #0044CC;
  --loop-blue-700: #0050F0;
  --loop-blue-600: #1A66FF;
  --loop-blue-500: #387AFF;
  --loop-blue-400: #578FFF;
  --loop-blue-300: #8FB4FF;
  --loop-blue-200: #CCDDFF;
  --loop-blue-100: #E9F0FF;

  /* --- Teal --- */
  --loop-teal-1000: #17343E;
  --loop-teal-900: #134658;
  --loop-teal-800: #1D6B86;
  --loop-teal-700: #227D9B;
  --loop-teal-600: #2898BD;
  --loop-teal-500: #4282D7;
  --loop-teal-400: #6CC3E0;
  --loop-teal-300: #9DDAEE;
  --loop-teal-200: #C6EEFB;
  --loop-teal-100: #E7F9FF;

  /* --- Green --- */
  --loop-green-1000: #1C3329;
  --loop-green-900: #164B35;
  --loop-green-800: #216E4E;
  --loop-green-700: #1F845A;
  --loop-green-600: #22A06B;
  --loop-green-500: #2AB87F;
  --loop-green-400: #4BCE97;
  --loop-green-300: #7EE2B8;
  --loop-green-200: #BAF3D8;
  --loop-green-100: #DCFFF1;

  /* --- Lime --- */
  --loop-lime-1000: #28311B;
  --loop-lime-900: #37471F;
  --loop-lime-800: #4C6B1F;
  --loop-lime-700: #5B7F24;
  --loop-lime-600: #6A9A23;
  --loop-lime-500: #82B536;
  --loop-lime-400: #97CB48;
  --loop-lime-300: #B3DF72;
  --loop-lime-200: #D3F1A7;
  --loop-lime-100: #EFFFD6;

  /* --- Yellow --- */
  --loop-yellow-1000: #512900;
  --loop-yellow-900: #6F3C06;
  --loop-yellow-800: #944F00;
  --loop-yellow-700: #B86E00;
  --loop-yellow-600: #E59100;
  --loop-yellow-500: #F0AD0D;
  --loop-yellow-400: #FFC34D;
  --loop-yellow-300: #FFD675;
  --loop-yellow-200: #FFE9AD;
  --loop-yellow-100: #FFF8D6;

  /* --- Orange --- */
  --loop-orange-1000: #521B00;
  --loop-orange-900: #702900;
  --loop-orange-800: #953A01;
  --loop-orange-700: #C25100;
  --loop-orange-600: #E6690F;
  --loop-orange-500: #F38A3F;
  --loop-orange-400: #FEA362;
  --loop-orange-300: #FEC195;
  --loop-orange-200: #FEDEC8;
  --loop-orange-100: #FFF0E5;

  /* --- Red --- */
  --loop-red-1000: #4E040B;
  --loop-red-900: #6B0610;
  --loop-red-800: #951825;
  --loop-red-700: #B82837;
  --loop-red-600: #E03344;
  --loop-red-500: #F15060;
  --loop-red-400: #F97888;
  --loop-red-300: #FDAAB2;
  --loop-red-200: #FFD2D7;
  --loop-red-100: #FFEBED;

  /* --- Pink --- */
  --loop-pink-1000: #49042D;
  --loop-pink-900: #670F44;
  --loop-pink-800: #932569;
  --loop-pink-700: #B41D81;
  --loop-pink-600: #DC389C;
  --loop-pink-500: #EC5BB0;
  --loop-pink-400: #F075C1;
  --loop-pink-300: #FA9ED7;
  --loop-pink-200: #FDD0EC;
  --loop-pink-100: #FFECF8;

  /* --- Purple --- */
  --loop-purple-1000: #320557;
  --loop-purple-900: #4C1579;
  --loop-purple-800: #6C28A3;
  --loop-purple-700: #8D35D4;
  --loop-purple-600: #A857EA;
  --loop-purple-500: #B975F0;
  --loop-purple-400: #C791F3;
  --loop-purple-300: #DAB1FB;
  --loop-purple-200: #EDD6FF;
  --loop-purple-100: #F8F0FF;

  /* --- Violet --- */
  --loop-violet-1000: #16004D;
  --loop-violet-900: #290D71;
  --loop-violet-800: #482086;
  --loop-violet-700: #693CDD;
  --loop-violet-600: #8354ED;
  --loop-violet-500: #987AF0;
  --loop-violet-400: #B095F3;
  --loop-violet-300: #C6B1FB;
  --loop-violet-200: #E3D8FF;
  --loop-violet-100: #F4F0FF;

  /* ===========================================
     TYPOGRAPHY PRIMITIVES
     =========================================== */

  /* --- Font Family --- */
  --loop-font-family-heading: 'Inter Variable', -apple-system, BlinkMacSystemFont, sans-serif;
  --loop-font-family-body: 'Inter Variable', -apple-system, BlinkMacSystemFont, sans-serif;
  --loop-font-family-code: 'JetBrains Mono', monospace;

  /* --- Font Weight --- */
  --loop-font-weight-bold: 664;
  --loop-font-weight-medium: 528;
  --loop-font-weight-regular: 400;

  /* --- Font Size: Heading --- */
  --loop-font-size-heading-4xl: 2.5rem;
  --loop-font-size-heading-3xl: 2.25rem;
  --loop-font-size-heading-2xl: 2rem;
  --loop-font-size-heading-xl: 1.75rem;
  --loop-font-size-heading-lg: 1.5rem;
  --loop-font-size-heading-md: 1.25rem;
  --loop-font-size-heading-sm2: 1.125rem;
  --loop-font-size-heading-sm: 1rem;
  --loop-font-size-heading-xs: 0.875rem;
  --loop-font-size-heading-2xs: 0.75rem;

  /* --- Font Size: Body --- */
  --loop-font-size-body-lg: 1rem;
  --loop-font-size-body-md: 0.875rem;
  --loop-font-size-body-sm: 0.75rem;
  --loop-font-size-body-xs: 0.625rem;

  /* --- Font Size: Code --- */
  --loop-font-size-code-lg: 1rem;
  --loop-font-size-code-md: 0.875rem;
  --loop-font-size-code-sm: 0.75rem;

  /* --- Line Height: Heading --- */
  --loop-line-height-heading-4xl: 3rem;
  --loop-line-height-heading-3xl: 2.75rem;
  --loop-line-height-heading-2xl: 2.5rem;
  --loop-line-height-heading-xl: 2rem;
  --loop-line-height-heading-lg: 1.75rem;
  --loop-line-height-heading-md: 1.5rem;
  --loop-line-height-heading-sm2: 1.25rem;
  --loop-line-height-heading-sm: 1.25rem;
  --loop-line-height-heading-xs: 1.25rem;
  --loop-line-height-heading-2xs: 1rem;

  /* --- Line Height: Body --- */
  --loop-line-height-body-lg: 1.5rem;
  --loop-line-height-body-md: 1.25rem;
  --loop-line-height-body-sm: 1rem;
  --loop-line-height-body-xs: 1rem;

  /* --- Line Height: Code --- */
  --loop-line-height-code-lg: 1.5rem;
  --loop-line-height-code-md: 1.25rem;
  --loop-line-height-code-sm: 1rem;

  /* --- Letter Spacing: Heading --- */
  --loop-letter-spacing-heading-4xl: -0.1rem;
  --loop-letter-spacing-heading-3xl: -0.0675rem;
  --loop-letter-spacing-heading-2xl: -0.06rem;
  --loop-letter-spacing-heading-xl: -0.035rem;
  --loop-letter-spacing-heading-lg: -0.015rem;
  --loop-letter-spacing-heading-md: -0.0125rem;
  --loop-letter-spacing-heading-sm2: -0.01125rem;
  --loop-letter-spacing-heading-sm: 0;
  --loop-letter-spacing-heading-xs: 0;
  --loop-letter-spacing-heading-2xs: 0.015rem;

  /* --- Letter Spacing: Body --- */
  --loop-letter-spacing-body-default: 0;
  --loop-letter-spacing-body-xs: 0.0125rem;
  --loop-letter-spacing-body-capitalized: 0.0625rem;

  /* --- Letter Spacing: Code --- */
  --loop-letter-spacing-code-lg: -0.1rem;
  --loop-letter-spacing-code-md: -0.0675rem;
  --loop-letter-spacing-code-sm: -0.06rem;

  /* --- Paragraph Spacing: Body --- */
  --loop-paragraph-spacing-body-lg: 16px;
  --loop-paragraph-spacing-body-md: 12px;
  --loop-paragraph-spacing-body-sm: 8px;
  --loop-paragraph-spacing-body-xs: 8px;

  /* --- Paragraph Spacing: Code --- */
  --loop-paragraph-spacing-code-lg: 16px;
  --loop-paragraph-spacing-code-md: 12px;
  --loop-paragraph-spacing-code-sm: 8px;

  /* ===========================================
     SPACING
     =========================================== */

  --loop-space-1000: 80px;
  --loop-space-900: 72px;
  --loop-space-800: 64px;
  --loop-space-700: 56px;
  --loop-space-600: 48px;
  --loop-space-500: 40px;
  --loop-space-400: 32px;
  --loop-space-300: 24px;
  --loop-space-250: 20px;
  --loop-space-200: 16px;
  --loop-space-150: 12px;
  --loop-space-100: 8px;
  --loop-space-075: 6px;
  --loop-space-050: 4px;
  --loop-space-025: 2px;
  --loop-space-0: 0px;

  /* Negative */
  --loop-space-negative-025: -2px;
  --loop-space-negative-050: -4px;
  --loop-space-negative-075: -6px;
  --loop-space-negative-100: -8px;
  --loop-space-negative-150: -12px;
  --loop-space-negative-200: -16px;
  --loop-space-negative-250: -20px;
  --loop-space-negative-300: -24px;
  --loop-space-negative-400: -32px;

  /* ===========================================
     BORDER
     =========================================== */

  /* --- Radius --- */
  --loop-radius-circle: 999px;
  --loop-radius-2xl: 24px;
  --loop-radius-xl: 16px;
  --loop-radius-lg: 12px;
  --loop-radius-md: 8px;
  --loop-radius-sm: 6px;
  --loop-radius-xs: 4px;
  --loop-radius-2xs: 2px;

  /* --- Thickness --- */
  --loop-thickness-400: 4px;
  --loop-thickness-300: 3px;
  --loop-thickness-200: 2px;
  --loop-thickness-150: 1.5px;
  --loop-thickness-100: 1px;

  /* --- Semantic Border Thickness --- */
  --loop-border-thickness-default: var(--loop-thickness-100);
  --loop-border-thickness-selected: var(--loop-thickness-200);
  --loop-border-thickness-focus: var(--loop-thickness-200);

  /* ===========================================
     EFFECTS
     =========================================== */

  /* --- Shadows --- */
  --loop-shadow-raised:
    0px 1px 2px 0px rgba(30, 31, 33, 0.16),
    0px 0px 1px 0px rgba(30, 31, 33, 0.12);

  --loop-shadow-overflow-light:
    0px 0px 8px 0px rgba(30, 31, 33, 0.16),
    0px 0px 1px 0px rgba(30, 31, 33, 0.12);

  --loop-shadow-overflow-dark:
    0px 0px 12px 0px rgba(30, 31, 33, 0.16),
    0px 0px 1px 0px rgba(30, 31, 33, 0.12);

  --loop-shadow-overlay-light:
    0px 10px 18px 0px rgba(30, 31, 33, 0.15),
    0px 0px 1px 0px rgba(30, 31, 33, 0.31);

  --loop-shadow-overlay-dark:
    0px 10px 18px 0px rgba(30, 31, 33, 0.15),
    0px 0px 1px 0px rgba(30, 31, 33, 0.31);

  /* --- Gradients --- */
  --loop-gradient-ai-light: linear-gradient(
    90deg,
    var(--loop-violet-200) 7.44%,
    var(--loop-pink-200) 36%,
    var(--loop-orange-200) 73.23%,
    var(--loop-yellow-200) 116.67%
  );

  --loop-gradient-ai-dark: linear-gradient(
    90deg,
    var(--loop-violet-900) 7.44%,
    var(--loop-pink-900) 36%,
    var(--loop-orange-900) 73.23%,
    var(--loop-yellow-900) 116.67%
  );

  --loop-gradient-ai-subtle-light: linear-gradient(
    90deg,
    var(--loop-violet-100) 7.44%,
    var(--loop-pink-100) 36%,
    var(--loop-orange-100) 73.23%,
    var(--loop-yellow-100) 116.67%
  );

  --loop-gradient-ai-subtle-dark: linear-gradient(
    90deg,
    var(--loop-violet-1000) 7.44%,
    var(--loop-pink-1000) 36%,
    var(--loop-orange-1000) 73.23%,
    var(--loop-yellow-1000) 116.67%
  );

  --loop-gradient-ai-hovered-light: linear-gradient(
    90deg,
    var(--loop-violet-300) 7.44%,
    var(--loop-pink-300) 36%,
    var(--loop-orange-300) 73.23%,
    var(--loop-yellow-300) 116.67%
  );

  --loop-gradient-ai-hovered-dark: linear-gradient(
    90deg,
    var(--loop-violet-800) 7.44%,
    var(--loop-pink-800) 36%,
    var(--loop-orange-800) 73.23%,
    var(--loop-yellow-800) 116.67%
  );

  --loop-gradient-ai-pressed-light: linear-gradient(
    90deg,
    var(--loop-violet-400) 7.44%,
    var(--loop-pink-400) 36%,
    var(--loop-orange-400) 73.23%,
    var(--loop-yellow-400) 116.67%
  );

  --loop-gradient-ai-pressed-dark: linear-gradient(
    90deg,
    var(--loop-violet-700) 7.44%,
    var(--loop-pink-700) 36%,
    var(--loop-orange-700) 73.23%,
    var(--loop-yellow-700) 116.67%
  );

  /* ===========================================
     SEMANTIC TOKENS (Light Mode Default)
     =========================================== */

  /* --- Text --- */
  --loop-text-default: var(--loop-neutral-1000);
  --loop-text-subtle: var(--loop-neutral-800);
  --loop-text-subtlest: var(--loop-neutral-600);
  --loop-text-disabled: var(--loop-neutral-400a);
  --loop-text-inverse: var(--loop-neutral-0);
  --loop-text-inverse-subtle: var(--loop-neutral-400);
  --loop-text-ai: var(--loop-neutral-1100);
  --loop-text-ai-inverse: var(--loop-neutral-0);
  --loop-text-brand: var(--loop-brand-700);
  --loop-text-selected: var(--loop-brand-700);
  --loop-text-information: var(--loop-blue-800);
  --loop-text-information-bolder: var(--loop-blue-900);
  --loop-text-success: var(--loop-green-700);
  --loop-text-success-bolder: var(--loop-green-900);
  --loop-text-warning: var(--loop-orange-700);
  --loop-text-warning-bolder: var(--loop-orange-800);
  --loop-text-warning-inverse: var(--loop-neutral-1000);
  --loop-text-danger: var(--loop-red-800);
  --loop-text-danger-bolder: var(--loop-red-900);

  /* --- Text Accent --- */
  --loop-text-accent-blue: var(--loop-blue-800);
  --loop-text-accent-blue-bold: var(--loop-blue-900);
  --loop-text-accent-teal: var(--loop-teal-800);
  --loop-text-accent-teal-bold: var(--loop-teal-900);
  --loop-text-accent-green: var(--loop-green-800);
  --loop-text-accent-green-bold: var(--loop-green-900);
  --loop-text-accent-lime: var(--loop-lime-800);
  --loop-text-accent-lime-bold: var(--loop-lime-900);
  --loop-text-accent-yellow: var(--loop-yellow-800);
  --loop-text-accent-yellow-bold: var(--loop-yellow-900);
  --loop-text-accent-orange: var(--loop-orange-800);
  --loop-text-accent-orange-bold: var(--loop-orange-900);
  --loop-text-accent-red: var(--loop-red-800);
  --loop-text-accent-red-bold: var(--loop-red-900);
  --loop-text-accent-pink: var(--loop-pink-800);
  --loop-text-accent-pink-bold: var(--loop-pink-900);
  --loop-text-accent-purple: var(--loop-purple-800);
  --loop-text-accent-purple-bold: var(--loop-purple-900);
  --loop-text-accent-violet: var(--loop-violet-800);
  --loop-text-accent-violet-bold: var(--loop-violet-900);
  --loop-text-accent-grey: var(--loop-neutral-800);
  --loop-text-accent-grey-bold: var(--loop-neutral-1100);

  /* --- Link --- */
  --loop-link-default: var(--loop-blue-700);
  --loop-link-default-hovered: var(--loop-blue-800);
  --loop-link-neutral: var(--loop-neutral-1100);
  --loop-link-neutral-hovered: var(--loop-neutral-1000);
  --loop-link-visited: var(--loop-purple-800);
  --loop-link-visited-hovered: var(--loop-purple-900);

  /* --- Icon --- */
  --loop-icon-default: var(--loop-neutral-1000);
  --loop-icon-subtle: var(--loop-neutral-700);
  --loop-icon-subtlest: var(--loop-neutral-500);
  --loop-icon-ai: var(--loop-neutral-1100);
  --loop-icon-ai-inverse: var(--loop-neutral-0);
  --loop-icon-inverse: var(--loop-neutral-0);
  --loop-icon-disabled: var(--loop-neutral-400a);
  --loop-icon-selected-disabled: var(--loop-neutral-300a);
  --loop-icon-brand: var(--loop-brand-700);
  --loop-icon-selected: var(--loop-brand-700);
  --loop-icon-information: var(--loop-blue-800);
  --loop-icon-success: var(--loop-green-700);
  --loop-icon-warning: var(--loop-orange-700);
  --loop-icon-warning-inverse: var(--loop-neutral-1000);
  --loop-icon-danger: var(--loop-red-800);

  /* --- Border --- */
  --loop-border-default: var(--loop-neutral-300a);
  --loop-border-default-subtle: var(--loop-neutral-200a);
  --loop-border-default-bolder: var(--loop-neutral-600);
  --loop-border-inverse: var(--loop-neutral-0);
  --loop-border-disabled: var(--loop-neutral-200a);
  --loop-border-input: var(--loop-neutral-500);
  --loop-border-brand: var(--loop-brand-700);
  --loop-border-selected: var(--loop-brand-700);
  --loop-border-information: var(--loop-blue-700);
  --loop-border-success: var(--loop-green-700);
  --loop-border-warning: var(--loop-orange-600);
  --loop-border-danger: var(--loop-red-700);

  /* --- Border Focus --- */
  --loop-border-focus-neutral: var(--loop-neutral-1000);
  --loop-border-focus-brand: var(--loop-brand-700);
  --loop-border-focus-information: var(--loop-blue-700);
  --loop-border-focus-success: var(--loop-green-700);
  --loop-border-focus-danger: var(--loop-red-700);

  /* --- Background --- */
  --loop-bg-default: var(--loop-neutral-0);
  --loop-bg-input: var(--loop-neutral-0);
  --loop-bg-input-hovered: var(--loop-neutral-100);
  --loop-bg-input-pressed: var(--loop-neutral-0);
  --loop-bg-neutral: var(--loop-neutral-200a);
  --loop-bg-neutral-hovered: var(--loop-neutral-300a);
  --loop-bg-neutral-pressed: var(--loop-neutral-400a);
  --loop-bg-neutral-subtle: var(--loop-transparent-b-0);
  --loop-bg-neutral-subtle-hovered: var(--loop-neutral-200a);
  --loop-bg-neutral-subtle-pressed: var(--loop-neutral-300a);
  --loop-bg-neutral-bold: var(--loop-neutral-1000);
  --loop-bg-neutral-bold-hovered: var(--loop-neutral-900);
  --loop-bg-neutral-bold-pressed: var(--loop-neutral-800);
  --loop-bg-disabled: var(--loop-neutral-100a);
  --loop-bg-brand-subtle: var(--loop-brand-100);
  --loop-bg-brand-subtle-hovered: var(--loop-brand-200);
  --loop-bg-brand-subtle-pressed: var(--loop-brand-300);
  --loop-bg-brand-bold: var(--loop-brand-700);
  --loop-bg-brand-bold-hovered: var(--loop-brand-800);
  --loop-bg-brand-bold-pressed: var(--loop-brand-900);
  --loop-bg-selected: var(--loop-brand-100);
  --loop-bg-selected-hovered: var(--loop-brand-200);
  --loop-bg-selected-pressed: var(--loop-brand-300);
  --loop-bg-selected-bold: var(--loop-brand-700);
  --loop-bg-selected-bold-hovered: var(--loop-brand-800);
  --loop-bg-selected-bold-pressed: var(--loop-brand-900);
  --loop-bg-information-subtle: var(--loop-blue-100);
  --loop-bg-information-bold: var(--loop-blue-700);
  --loop-bg-success-subtle: var(--loop-green-100);
  --loop-bg-success-bold: var(--loop-green-700);
  --loop-bg-warning-subtle: var(--loop-yellow-100);
  --loop-bg-warning-bold: var(--loop-yellow-300);
  --loop-bg-danger-subtle: var(--loop-red-100);
  --loop-bg-danger-bold: var(--loop-red-700);

  /* --- Surface --- */
  --loop-surface-default: var(--loop-neutral-0);
  --loop-surface-hovered: var(--loop-neutral-200);
  --loop-surface-pressed: var(--loop-neutral-300);
  --loop-surface-overlay: var(--loop-neutral-0);
  --loop-surface-overlay-hovered: var(--loop-neutral-200);
  --loop-surface-overlay-pressed: var(--loop-neutral-300);
  --loop-surface-raised: var(--loop-neutral-0);
  --loop-surface-raised-hovered: var(--loop-neutral-200);
  --loop-surface-raised-pressed: var(--loop-neutral-300);
  --loop-surface-sunken: var(--loop-neutral-100);

  /* --- Interaction --- */
  --loop-interaction-hovered: var(--loop-transparent-b-100);
  --loop-interaction-pressed: var(--loop-transparent-b-300);

  /* --- Skeleton --- */
  --loop-skeleton-default: var(--loop-neutral-200a);
  --loop-skeleton-subtle: var(--loop-neutral-100a);

  /* --- Current shadow/gradient (theme-aware) --- */
  --loop-shadow-overflow: var(--loop-shadow-overflow-light);
  --loop-shadow-overlay: var(--loop-shadow-overlay-light);
  --loop-gradient-ai: var(--loop-gradient-ai-light);
  --loop-gradient-ai-subtle: var(--loop-gradient-ai-subtle-light);
  --loop-gradient-ai-hovered: var(--loop-gradient-ai-hovered-light);
  --loop-gradient-ai-pressed: var(--loop-gradient-ai-pressed-light);
}

/* ===========================================
   DARK MODE
   =========================================== */

[data-theme="dark"],
.dark-mode {
  /* --- Text --- */
  --loop-text-default: var(--loop-dark-neutral-1000);
  --loop-text-subtle: var(--loop-dark-neutral-800);
  --loop-text-subtlest: var(--loop-dark-neutral-600);
  --loop-text-disabled: var(--loop-dark-neutral-400a);
  --loop-text-inverse: var(--loop-dark-neutral-100);
  --loop-text-inverse-subtle: var(--loop-dark-neutral-300);
  --loop-text-ai: var(--loop-neutral-0);
  --loop-text-ai-inverse: var(--loop-neutral-1100);
  --loop-text-brand: var(--loop-brand-400);
  --loop-text-selected: var(--loop-brand-400);
  --loop-text-information: var(--loop-blue-300);
  --loop-text-information-bolder: var(--loop-blue-200);
  --loop-text-success: var(--loop-green-400);
  --loop-text-success-bolder: var(--loop-green-200);
  --loop-text-warning: var(--loop-yellow-400);
  --loop-text-warning-bolder: var(--loop-yellow-300);
  --loop-text-warning-inverse: var(--loop-dark-neutral-100);
  --loop-text-danger: var(--loop-red-300);
  --loop-text-danger-bolder: var(--loop-red-200);

  /* --- Text Accent --- */
  --loop-text-accent-blue: var(--loop-blue-300);
  --loop-text-accent-blue-bold: var(--loop-blue-200);
  --loop-text-accent-teal: var(--loop-teal-300);
  --loop-text-accent-teal-bold: var(--loop-teal-200);
  --loop-text-accent-green: var(--loop-green-300);
  --loop-text-accent-green-bold: var(--loop-green-200);
  --loop-text-accent-lime: var(--loop-lime-300);
  --loop-text-accent-lime-bold: var(--loop-lime-200);
  --loop-text-accent-yellow: var(--loop-yellow-300);
  --loop-text-accent-yellow-bold: var(--loop-yellow-200);
  --loop-text-accent-orange: var(--loop-orange-300);
  --loop-text-accent-orange-bold: var(--loop-orange-200);
  --loop-text-accent-red: var(--loop-red-300);
  --loop-text-accent-red-bold: var(--loop-red-200);
  --loop-text-accent-pink: var(--loop-pink-300);
  --loop-text-accent-pink-bold: var(--loop-pink-200);
  --loop-text-accent-purple: var(--loop-purple-300);
  --loop-text-accent-purple-bold: var(--loop-purple-200);
  --loop-text-accent-violet: var(--loop-violet-300);
  --loop-text-accent-violet-bold: var(--loop-violet-200);
  --loop-text-accent-grey: var(--loop-dark-neutral-800);
  --loop-text-accent-grey-bold: var(--loop-dark-neutral-1100);

  /* --- Link --- */
  --loop-link-default: var(--loop-blue-400);
  --loop-link-default-hovered: var(--loop-blue-300);
  --loop-link-neutral: var(--loop-dark-neutral-1100);
  --loop-link-neutral-hovered: var(--loop-dark-neutral-1000);
  --loop-link-visited: var(--loop-purple-300);
  --loop-link-visited-hovered: var(--loop-purple-200);

  /* --- Icon --- */
  --loop-icon-default: var(--loop-dark-neutral-1000);
  --loop-icon-subtle: var(--loop-dark-neutral-700);
  --loop-icon-subtlest: var(--loop-dark-neutral-500);
  --loop-icon-ai: var(--loop-neutral-0);
  --loop-icon-ai-inverse: var(--loop-neutral-1100);
  --loop-icon-inverse: var(--loop-dark-neutral-100);
  --loop-icon-disabled: var(--loop-dark-neutral-400a);
  --loop-icon-selected-disabled: var(--loop-dark-neutral-300a);
  --loop-icon-brand: var(--loop-brand-400);
  --loop-icon-selected: var(--loop-brand-400);
  --loop-icon-information: var(--loop-blue-300);
  --loop-icon-success: var(--loop-green-400);
  --loop-icon-warning: var(--loop-yellow-400);
  --loop-icon-warning-inverse: var(--loop-dark-neutral-100);
  --loop-icon-danger: var(--loop-red-300);

  /* --- Border --- */
  --loop-border-default: var(--loop-dark-neutral-300a);
  --loop-border-default-subtle: var(--loop-dark-neutral-200a);
  --loop-border-default-bolder: var(--loop-dark-neutral-600);
  --loop-border-inverse: var(--loop-dark-neutral-0);
  --loop-border-disabled: var(--loop-dark-neutral-200a);
  --loop-border-input: var(--loop-dark-neutral-500);
  --loop-border-brand: var(--loop-brand-400);
  --loop-border-selected: var(--loop-brand-400);
  --loop-border-information: var(--loop-blue-400);
  --loop-border-success: var(--loop-green-400);
  --loop-border-warning: var(--loop-yellow-500);
  --loop-border-danger: var(--loop-red-400);

  /* --- Border Focus --- */
  --loop-border-focus-neutral: var(--loop-dark-neutral-1000);
  --loop-border-focus-brand: var(--loop-brand-400);
  --loop-border-focus-information: var(--loop-blue-400);
  --loop-border-focus-success: var(--loop-green-400);
  --loop-border-focus-danger: var(--loop-red-400);

  /* --- Background --- */
  --loop-bg-default: var(--loop-dark-neutral-100);
  --loop-bg-input: var(--loop-dark-neutral-200);
  --loop-bg-input-hovered: var(--loop-dark-neutral-250);
  --loop-bg-input-pressed: var(--loop-dark-neutral-200);
  --loop-bg-neutral: var(--loop-dark-neutral-200a);
  --loop-bg-neutral-hovered: var(--loop-dark-neutral-300a);
  --loop-bg-neutral-pressed: var(--loop-dark-neutral-400a);
  --loop-bg-neutral-subtle: var(--loop-transparent-w-0);
  --loop-bg-neutral-subtle-hovered: var(--loop-dark-neutral-200a);
  --loop-bg-neutral-subtle-pressed: var(--loop-dark-neutral-300a);
  --loop-bg-neutral-bold: var(--loop-dark-neutral-1000);
  --loop-bg-neutral-bold-hovered: var(--loop-dark-neutral-900);
  --loop-bg-neutral-bold-pressed: var(--loop-dark-neutral-800);
  --loop-bg-disabled: var(--loop-dark-neutral-100a);
  --loop-bg-brand-subtle: var(--loop-brand-1000);
  --loop-bg-brand-subtle-hovered: var(--loop-brand-900);
  --loop-bg-brand-subtle-pressed: var(--loop-brand-800);
  --loop-bg-brand-bold: var(--loop-brand-400);
  --loop-bg-brand-bold-hovered: var(--loop-brand-300);
  --loop-bg-brand-bold-pressed: var(--loop-brand-200);
  --loop-bg-selected: var(--loop-brand-1000);
  --loop-bg-selected-hovered: var(--loop-brand-900);
  --loop-bg-selected-pressed: var(--loop-brand-800);
  --loop-bg-selected-bold: var(--loop-brand-400);
  --loop-bg-selected-bold-hovered: var(--loop-brand-300);
  --loop-bg-selected-bold-pressed: var(--loop-brand-200);
  --loop-bg-information-subtle: var(--loop-blue-1000);
  --loop-bg-information-bold: var(--loop-blue-400);
  --loop-bg-success-subtle: var(--loop-green-1000);
  --loop-bg-success-bold: var(--loop-green-400);
  --loop-bg-warning-subtle: var(--loop-orange-1000);
  --loop-bg-warning-bold: var(--loop-yellow-300);
  --loop-bg-danger-subtle: var(--loop-red-1000);
  --loop-bg-danger-bold: var(--loop-red-400);

  /* --- Surface --- */
  --loop-surface-default: var(--loop-dark-neutral-100);
  --loop-surface-hovered: var(--loop-dark-neutral-200);
  --loop-surface-pressed: var(--loop-dark-neutral-250);
  --loop-surface-overlay: var(--loop-dark-neutral-250);
  --loop-surface-overlay-hovered: var(--loop-dark-neutral-300);
  --loop-surface-overlay-pressed: var(--loop-dark-neutral-350);
  --loop-surface-raised: var(--loop-dark-neutral-200);
  --loop-surface-raised-hovered: var(--loop-dark-neutral-250);
  --loop-surface-raised-pressed: var(--loop-dark-neutral-300);
  --loop-surface-sunken: var(--loop-dark-neutral-0);

  /* --- Interaction --- */
  --loop-interaction-hovered: var(--loop-transparent-w-100);
  --loop-interaction-pressed: var(--loop-transparent-w-300);

  /* --- Skeleton --- */
  --loop-skeleton-default: var(--loop-dark-neutral-200a);
  --loop-skeleton-subtle: var(--loop-dark-neutral-100a);

  /* --- Effects --- */
  --loop-shadow-overflow: var(--loop-shadow-overflow-dark);
  --loop-shadow-overlay: var(--loop-shadow-overlay-dark);
  --loop-gradient-ai: var(--loop-gradient-ai-dark);
  --loop-gradient-ai-subtle: var(--loop-gradient-ai-subtle-dark);
  --loop-gradient-ai-hovered: var(--loop-gradient-ai-hovered-dark);
  --loop-gradient-ai-pressed: var(--loop-gradient-ai-pressed-dark);
}