/**
 * Salt Design System - Theme Colors
 * Updated Color System from Google Slides (September 2025)
 *
 * Color System:
 * - Neutral Scale: Custom grayscale based on Graphite Depth and White Noise
 * - Purple Signal: Primary/accent color (12-step scale)
 * - Purple Slate: Secondary purple for UI elements
 * - Accent colors: Teal Pulse, Green Pulse, Yellow Halogen
 * - Semantic colors: Error (Red), Success (Jade/Green), Warning (Amber), Info (Blue)
 * - All colors have light and dark mode variants
 * - Alpha variants available for transparency effects
 */

:root {
  /* ============================================================================
     NEUTRAL SCALE (Surface/Neutral Colors) - Light Theme
     Grayscale based on Graphite Depth (#272631) and White Noise (#F8F8FA)
     ============================================================================ */

  --color-neutral-1: #ffffff;
  --color-neutral-2: #F8F8FA;
  --color-neutral-3: #f0f0f3;
  --color-neutral-4: #e8e8ec;
  --color-neutral-5: #DAD9E4;
  --color-neutral-6: #c5c4d1;
  --color-neutral-7: #afaec0;
  --color-neutral-8: #9998ad;
  --color-neutral-9: #6F6993;
  --color-neutral-10: #5a5977;
  --color-neutral-11: #454460;
  --color-neutral-12: #272631;

  /* Neutral Alpha - Light Theme (for overlays and transparency) */
  --color-neutral-alpha-1: #27263103;
  --color-neutral-alpha-2: #2726310a;
  --color-neutral-alpha-3: #2726310f;
  --color-neutral-alpha-4: #2726311a;
  --color-neutral-alpha-5: #27263125;
  --color-neutral-alpha-6: #2726313a;
  --color-neutral-alpha-8: #27263150;
  --color-neutral-alpha-9: #27263166;
  --color-neutral-alpha-10: #27263185;
  --color-neutral-alpha-11: #272631a1;
  --color-neutral-alpha-12: #272631f7;

  /* ============================================================================
     PURPLE SIGNAL (Primary/Accent Color) - Light Theme
     Main brand color for buttons, links, and interactive elements
     ============================================================================ */

  --color-purple-signal-1: #fefcff;
  --color-purple-signal-2: #f9f6ff;
  --color-purple-signal-3: #f0e8ff;
  --color-purple-signal-4: #D9CAF0;
  --color-purple-signal-5: #c9b3f0;
  --color-purple-signal-6: #b494e8;
  --color-purple-signal-7: #9c73df;
  --color-purple-signal-8: #8350d6;
  --color-purple-signal-9: #6728C2;
  --color-purple-signal-10: #5a22a8;
  --color-purple-signal-11: #4a1c8a;
  --color-purple-signal-12: #2d1154;

  /* ============================================================================
     SECONDARY ACCENT COLORS - Light Theme
     Additional brand colors for specific use cases
     ============================================================================ */

  /* Teal Pulse */
  --color-teal-pulse-1: #f5fffe;
  --color-teal-pulse-2: #e6fffe;
  --color-teal-pulse-3: #d1faf8;
  --color-teal-pulse-4: #b8f4f0;
  --color-teal-pulse-5: #9deed9;
  --color-teal-pulse-6: #7fdbd3;
  --color-teal-pulse-7: #6ccdc5;
  --color-teal-pulse-8: #5fcfbd;
  --color-teal-pulse-9: #5FBEB6;
  --color-teal-pulse-10: #4fa49d;
  --color-teal-pulse-11: #3f8983;
  --color-teal-pulse-12: #1f4542;

  /* Green Pulse */
  --color-green-pulse-1: #f3fef9;
  --color-green-pulse-2: #e4fdf0;
  --color-green-pulse-3: #d3fce7;
  --color-green-pulse-4: #c0fadd;
  --color-green-pulse-5: #A7F6CD;
  --color-green-pulse-6: #8bf0bd;
  --color-green-pulse-7: #6de9ab;
  --color-green-pulse-8: #4de197;
  --color-green-pulse-9: #2ed980;
  --color-green-pulse-10: #25c06f;
  --color-green-pulse-11: #1da05c;
  --color-green-pulse-12: #0e502e;

  /* Yellow Halogen */
  --color-yellow-halogen-1: #fffefb;
  --color-yellow-halogen-2: #fffcf5;
  --color-yellow-halogen-3: #fffaed;
  --color-yellow-halogen-4: #fff7e0;
  --color-yellow-halogen-5: #FFF2CC;
  --color-yellow-halogen-6: #ffedb3;
  --color-yellow-halogen-7: #ffe899;
  --color-yellow-halogen-8: #ffe380;
  --color-yellow-halogen-9: #ffde66;
  --color-yellow-halogen-10: #ffd84d;
  --color-yellow-halogen-11: #d6b640;
  --color-yellow-halogen-12: #6b5b20;

  /* ============================================================================
     SEMANTIC COLORS - Light Theme
     Used to communicate meaning: errors, success, warnings, and information
     ============================================================================ */

  /* Error (Red) */
  --color-error-1: #fffcfc;
  --color-error-2: #fff7f7;
  --color-error-3: #ffefef;
  --color-error-4: #ffe5e5;
  --color-error-5: #fdd8d8;
  --color-error-6: #f9c6c6;
  --color-error-7: #f3aeaf;
  --color-error-8: #eb9091;
  --color-error-9: #e5484d;
  --color-error-10: #d93d42;
  --color-error-11: #c62a2f;
  --color-error-12: #641723;

  /* Success (Green Pulse based) */
  --color-success-1: #f3fef9;
  --color-success-2: #e4fdf0;
  --color-success-3: #d3fce7;
  --color-success-4: #c0fadd;
  --color-success-5: #A7F6CD;
  --color-success-6: #8bf0bd;
  --color-success-7: #6de9ab;
  --color-success-8: #4de197;
  --color-success-9: #2ed980;
  --color-success-10: #25c06f;
  --color-success-11: #1da05c;
  --color-success-12: #0e502e;

  /* Warning (Amber) */
  --color-warning-1: #fefdfb;
  --color-warning-2: #fff9ed;
  --color-warning-3: #fff3d0;
  --color-warning-4: #ffecb7;
  --color-warning-5: #ffe0a1;
  --color-warning-6: #f5d08c;
  --color-warning-7: #e4bb78;
  --color-warning-8: #d6a35c;
  --color-warning-9: #ffc53d;
  --color-warning-10: #ffba1a;
  --color-warning-11: #915930;
  --color-warning-12: #4f3422;

  /* Info (Blue) */
  --color-info-1: #fbfdff;
  --color-info-2: #f5faff;
  --color-info-3: #edf6ff;
  --color-info-4: #e1f0ff;
  --color-info-5: #cee7fe;
  --color-info-6: #b7d9f8;
  --color-info-7: #96c7f2;
  --color-info-8: #5eb0ef;
  --color-info-9: #0091ff;
  --color-info-10: #0880ea;
  --color-info-11: #0b68cb;
  --color-info-12: #113264;

  /* ============================================================================
     SEMANTIC MAPPINGS - Light Theme
     Abstract color names for consistent usage throughout the application
     ============================================================================ */

  /* Backgrounds */
  --color-bg-page: #ffffff;
  --color-bg-surface: var(--color-neutral-1);
  --color-bg-surface-subtle: var(--color-neutral-2);
  --color-bg-surface-muted: var(--color-neutral-3);

  /* Text */
  --color-text-base: var(--color-neutral-12);
  --color-text-subtle: var(--color-neutral-11);
  --color-text-muted: var(--color-neutral-10);
  --color-text-disabled: var(--color-neutral-9);

  /* Borders */
  --color-border-base: var(--color-neutral-8);
  --color-border-subtle: var(--color-neutral-6);
  --color-border-strong: var(--color-neutral-11);

  /* Primary/Accent (Purple Signal) */
  --color-primary: var(--color-purple-signal-9);
  --color-primary-hover: var(--color-purple-signal-10);
  --color-primary-active: var(--color-purple-signal-11);
  --color-primary-subtle: var(--color-purple-signal-3);
  --color-on-primary: #ffffff;

  /* Interactive States */
  --color-focus-ring: var(--color-purple-signal-9);
  --color-selection-bg: var(--color-purple-signal-5);

  /* Semantic - Applied Colors */
  --color-error: var(--color-error-9);
  --color-error-bg: var(--color-error-3);
  --color-success: var(--color-success-5);
  --color-success-bg: var(--color-success-3);
  --color-warning: var(--color-warning-9);
  --color-warning-bg: var(--color-warning-3);
  --color-info: var(--color-info-9);
  --color-info-bg: var(--color-info-3);

  /* Additional Radix UI Colors (for future use) */
  --color-radius-xl: 12px;
  --color-radius-lg: 8px;
  --color-radius-md: 6px;
  --color-space-1: 4px;
  --color-space-2: 8px;
  --color-space-3: 12px;
  --color-space-5: 24px;
  --color-space-6: 32px;
}

/* ============================================================================
   DARK THEME
   Dark mode color palette (inverted scales and dark-optimized colors)
   ============================================================================ */

[data-theme="dark"] {
  /* Neutral Scale Dark - Inverted scale for dark backgrounds */
  --color-neutral-1: #000000;
  --color-neutral-2: #0f0f12;
  --color-neutral-3: #18181c;
  --color-neutral-4: #1f1f24;
  --color-neutral-5: #272631;
  --color-neutral-6: #32323e;
  --color-neutral-7: #3e3e4c;
  --color-neutral-8: #4b4b5b;
  --color-neutral-9: #6F6993;
  --color-neutral-10: #8e8db0;
  --color-neutral-11: #c5c4d1;
  --color-neutral-12: #F8F8FA;

  /* Neutral Alpha Dark */
  --color-neutral-alpha-1: #00000003;
  --color-neutral-alpha-2: #f8f8fa0a;
  --color-neutral-alpha-3: #f8f8fa0f;
  --color-neutral-alpha-4: #f8f8fa1a;
  --color-neutral-alpha-5: #f8f8fa25;
  --color-neutral-alpha-6: #f8f8fa32;
  --color-neutral-alpha-8: #f8f8fa4b;
  --color-neutral-alpha-9: #f8f8fa6f;
  --color-neutral-alpha-10: #f8f8fa8e;
  --color-neutral-alpha-11: #f8f8fac5;
  --color-neutral-alpha-12: #f8f8faf7;

  /* Purple Signal Dark - Adjusted for dark backgrounds */
  --color-purple-signal-1: #1a0d2e;
  --color-purple-signal-2: #25134a;
  --color-purple-signal-3: #331961;
  --color-purple-signal-4: #401f76;
  --color-purple-signal-5: #4d258b;
  --color-purple-signal-6: #5a2ca0;
  --color-purple-signal-7: #6935b6;
  --color-purple-signal-8: #7942cc;
  --color-purple-signal-9: #6728C2;
  --color-purple-signal-10: #8050d8;
  --color-purple-signal-11: #a377e8;
  --color-purple-signal-12: #e8d9f9;

  /* Teal Pulse Dark */
  --color-teal-pulse-1: #0d1f1e;
  --color-teal-pulse-2: #122b2a;
  --color-teal-pulse-3: #163736;
  --color-teal-pulse-4: #1b4342;
  --color-teal-pulse-5: #204f4e;
  --color-teal-pulse-6: #2a6562;
  --color-teal-pulse-7: #357c77;
  --color-teal-pulse-8: #419691;
  --color-teal-pulse-9: #5FBEB6;
  --color-teal-pulse-10: #78cdc5;
  --color-teal-pulse-11: #92dcd5;
  --color-teal-pulse-12: #d1f4f0;

  /* Green Pulse Dark */
  --color-green-pulse-1: #0e2019;
  --color-green-pulse-2: #102a1f;
  --color-green-pulse-3: #143727;
  --color-green-pulse-4: #18442f;
  --color-green-pulse-5: #1d5237;
  --color-green-pulse-6: #256545;
  --color-green-pulse-7: #2e7953;
  --color-green-pulse-8: #389165;
  --color-green-pulse-9: #2ed980;
  --color-green-pulse-10: #4de197;
  --color-green-pulse-11: #A7F6CD;
  --color-green-pulse-12: #d3fce7;

  /* Yellow Halogen Dark */
  --color-yellow-halogen-1: #1f1c0d;
  --color-yellow-halogen-2: #2a2512;
  --color-yellow-halogen-3: #352f17;
  --color-yellow-halogen-4: #40391d;
  --color-yellow-halogen-5: #4b4323;
  --color-yellow-halogen-6: #5e5429;
  --color-yellow-halogen-7: #726630;
  --color-yellow-halogen-8: #8c7d3a;
  --color-yellow-halogen-9: #ffde66;
  --color-yellow-halogen-10: #ffe380;
  --color-yellow-halogen-11: #FFF2CC;
  --color-yellow-halogen-12: #fffaed;

  /* Error Dark (Red) */
  --color-error-1: #1f1315;
  --color-error-2: #291415;
  --color-error-3: #3c181a;
  --color-error-4: #481a1d;
  --color-error-5: #541b1f;
  --color-error-6: #671e22;
  --color-error-7: #822025;
  --color-error-8: #aa2429;
  --color-error-9: #e5484d;
  --color-error-10: #f2555a;
  --color-error-11: #ff6369;
  --color-error-12: #feecee;

  /* Success Dark (Green Pulse based) */
  --color-success-1: #0e2019;
  --color-success-2: #102a1f;
  --color-success-3: #143727;
  --color-success-4: #18442f;
  --color-success-5: #1d5237;
  --color-success-6: #256545;
  --color-success-7: #2e7953;
  --color-success-8: #389165;
  --color-success-9: #2ed980;
  --color-success-10: #4de197;
  --color-success-11: #A7F6CD;
  --color-success-12: #d3fce7;

  /* Warning Dark (Amber) */
  --color-warning-1: #1f1300;
  --color-warning-2: #271700;
  --color-warning-3: #341c00;
  --color-warning-4: #3f2200;
  --color-warning-5: #4a2800;
  --color-warning-6: #573300;
  --color-warning-7: #693f05;
  --color-warning-8: #824e00;
  --color-warning-9: #ffc53d;
  --color-warning-10: #ffd60a;
  --color-warning-11: #ffca16;
  --color-warning-12: #ffe7a3;

  /* Info Dark (Blue) */
  --color-info-1: #0d1520;
  --color-info-2: #111927;
  --color-info-3: #0d2847;
  --color-info-4: #003362;
  --color-info-5: #004074;
  --color-info-6: #104d87;
  --color-info-7: #205d9e;
  --color-info-8: #2870bd;
  --color-info-9: #0091ff;
  --color-info-10: #3b9eff;
  --color-info-11: #70b8ff;
  --color-info-12: #c2e6ff;

  /* Semantic Mappings Dark */
  --color-bg-page: #000000;
  --color-bg-surface: var(--color-neutral-1);
  --color-bg-surface-subtle: var(--color-neutral-2);
  --color-bg-surface-muted: var(--color-neutral-3);

  --color-text-base: var(--color-neutral-12);
  --color-text-subtle: var(--color-neutral-11);
  --color-text-muted: var(--color-neutral-10);
  --color-text-disabled: var(--color-neutral-9);

  --color-border-base: var(--color-neutral-8);
  --color-border-subtle: var(--color-neutral-6);
  --color-border-strong: var(--color-neutral-11);

  --color-primary: var(--color-purple-signal-9);
  --color-primary-hover: var(--color-purple-signal-10);
  --color-primary-active: var(--color-purple-signal-11);
  --color-primary-subtle: var(--color-purple-signal-3);
  --color-on-primary: #ffffff;

  --color-focus-ring: var(--color-purple-signal-10);
  --color-selection-bg: var(--color-purple-signal-4);

  --color-error: var(--color-error-9);
  --color-error-bg: var(--color-error-3);
  --color-success: var(--color-success-11);
  --color-success-bg: var(--color-success-3);
  --color-warning: var(--color-warning-9);
  --color-warning-bg: var(--color-warning-3);
  --color-info: var(--color-info-9);
  --color-info-bg: var(--color-info-3);
}

/* ============================================================================
   THEME TRANSITION
   Smooth transition when switching between themes
   ============================================================================ */

* {
  transition: background-color 0.2s ease,
              color 0.2s ease,
              border-color 0.2s ease;
}

/* Disable transitions on initial load */
.no-transition * {
  transition: none !important;
}