/* =============================================================================
   NOODL DESIGN SYSTEM - COLORS
   Minimal palette: Red + Black + White
   ============================================================================= */

:root {
  /* ---------------------------------------------------------------------------
     BASE COLORS
     A deliberately minimal palette - one accent, pure neutrals
     --------------------------------------------------------------------------- */

  /* Primary - Noodl Red */
  --base-color-red-100: #fef2f3;
  --base-color-red-200: #fde3e5;
  --base-color-red-300: #fbc5c9;
  --base-color-red-400: #f7969e;
  --base-color-red-500: #ef5662;
  --base-color-red-600: #d21f3c;
  --base-color-red-700: #b91830;
  --base-color-red-800: #9a1729;
  --base-color-red-900: #801827;
  --base-color-red-950: #460a11;

  /* Neutrals - Pure black to white, no color tint */
  --base-color-neutral-0: #000000;
  --base-color-neutral-50: #0a0a0a;
  --base-color-neutral-100: #121212;
  --base-color-neutral-200: #1a1a1a;
  --base-color-neutral-300: #262626;
  --base-color-neutral-400: #333333;
  --base-color-neutral-500: #525252;
  --base-color-neutral-600: #737373;
  --base-color-neutral-700: #a3a3a3;
  --base-color-neutral-800: #d4d4d4;
  --base-color-neutral-900: #e5e5e5;
  --base-color-neutral-950: #f5f5f5;
  --base-color-neutral-1000: #ffffff;

  /* Transparent variants */
  --base-color-black-transparent-90: rgba(0, 0, 0, 0.9);
  --base-color-black-transparent-80: rgba(0, 0, 0, 0.8);
  --base-color-black-transparent-50: rgba(0, 0, 0, 0.5);
  --base-color-white-transparent-10: rgba(255, 255, 255, 0.1);
  --base-color-white-transparent-15: rgba(255, 255, 255, 0.15);
  --base-color-white-transparent-50: rgba(255, 255, 255, 0.5);

  /* ---------------------------------------------------------------------------
     SEMANTIC COLORS (Status indicators)
     --------------------------------------------------------------------------- */

  /* Success - Keeping a green for semantic meaning */
  --base-color-success-100: #ecfdf5;
  --base-color-success-200: #a7f3d0;
  --base-color-success-300: #6ee7b7;
  --base-color-success-400: #34d399;
  --base-color-success-500: #10b981;
  --base-color-success-600: #059669;
  --base-color-success-700: #047857;
  --base-color-success-800: #065f46;
  --base-color-success-900: #064e3b;
  --base-color-success-1000: #022c22;

  /* Error - Uses the brand red */
  --base-color-error-100: var(--base-color-red-100);
  --base-color-error-200: var(--base-color-red-200);
  --base-color-error-300: var(--base-color-red-300);
  --base-color-error-400: var(--base-color-red-400);
  --base-color-error-500: var(--base-color-red-500);
  --base-color-error-600: var(--base-color-red-600);
  --base-color-error-700: var(--base-color-red-700);
  --base-color-error-800: var(--base-color-red-800);
  --base-color-error-900: var(--base-color-red-900);
  --base-color-error-1000: var(--base-color-red-950);

  /* ---------------------------------------------------------------------------
     NODE TYPE COLORS
     Modern, vibrant colors to distinguish node types on canvas
     Brightened and more saturated for better visual distinction
     --------------------------------------------------------------------------- */

  /* Node-Pink - For Custom/User nodes - Vibrant Pink */
  --base-color-node-pink-100: #fef2f8;
  --base-color-node-pink-200: #fce0ed;
  --base-color-node-pink-300: #f9b5d8;
  --base-color-node-pink-400: #f58ac3;
  --base-color-node-pink-500: #ec5ca8;
  --base-color-node-pink-600: #d63a8e;
  --base-color-node-pink-700: #b02872;
  --base-color-node-pink-800: #8a1f5b;
  --base-color-node-pink-900: #641746;
  --base-color-node-pink-1000: #3a0d28;

  /* Node-Purple - For Component nodes - Vibrant Purple */
  --base-color-node-purple-100: #faf7fc;
  --base-color-node-purple-200: #f0e8f8;
  --base-color-node-purple-300: #ddc5ef;
  --base-color-node-purple-400: #c99ee5;
  --base-color-node-purple-500: #b176db;
  --base-color-node-purple-600: #9854c6;
  --base-color-node-purple-700: #7d3da5;
  --base-color-node-purple-800: #612e82;
  --base-color-node-purple-900: #46215e;
  --base-color-node-purple-1000: #291436;

  /* Node-Green - For Data nodes - Vibrant Green */
  --base-color-node-green-100: #f2fdf2;
  --base-color-node-green-200: #ddf5dd;
  --base-color-node-green-300: #b5e8b5;
  --base-color-node-green-400: #8ddb8d;
  --base-color-node-green-500: #5fcb5f;
  --base-color-node-green-600: #3db83d;
  --base-color-node-green-700: #2d9a2d;
  --base-color-node-green-800: #227822;
  --base-color-node-green-900: #185618;
  --base-color-node-green-1000: #0d2f0d;

  /* Node-Gray - For Logic nodes - Slightly warmer gray */
  --base-color-node-grey-100: #f8f8f8;
  --base-color-node-grey-200: #e8e8e8;
  --base-color-node-grey-300: #cccccc;
  --base-color-node-grey-400: #acacac;
  --base-color-node-grey-500: #888888;
  --base-color-node-grey-600: #6a6a6a;
  --base-color-node-grey-700: #525252;
  --base-color-node-grey-800: #3a3a3a;
  --base-color-node-grey-900: #262626;
  --base-color-node-grey-1000: #141414;

  /* Node-Blue - For Visual nodes - Vibrant Blue */
  --base-color-node-blue-100: #f3f8fc;
  --base-color-node-blue-200: #deeaf7;
  --base-color-node-blue-300: #b8d7ee;
  --base-color-node-blue-400: #91c3e5;
  --base-color-node-blue-500: #62aed9;
  --base-color-node-blue-600: #3d96ca;
  --base-color-node-blue-700: #2c7aac;
  --base-color-node-blue-800: #21608a;
  --base-color-node-blue-900: #174563;
  --base-color-node-blue-1000: #0d2638;

  /* ---------------------------------------------------------------------------
     LEGACY ALIASES - For backwards compatibility
     --------------------------------------------------------------------------- */

  /* Grey -> Neutral */
  --base-color-grey-100: var(--base-color-neutral-950);
  --base-color-grey-100-transparent: var(--base-color-white-transparent-10);
  --base-color-grey-200: var(--base-color-neutral-800);
  --base-color-grey-300: var(--base-color-neutral-700);
  --base-color-grey-400: var(--base-color-neutral-600);
  --base-color-grey-500: var(--base-color-neutral-500);
  --base-color-grey-600: var(--base-color-neutral-400);
  --base-color-grey-700: var(--base-color-neutral-300);
  --base-color-grey-800: var(--base-color-neutral-200);
  --base-color-grey-900: var(--base-color-neutral-100);
  --base-color-grey-1000: var(--base-color-neutral-50);
  --base-color-grey-1000-transparent: var(--base-color-black-transparent-80);
  --base-color-grey-1000-transparent-2: var(--base-color-black-transparent-50);

  /* Teal -> Neutral (secondary is now white/gray) */
  --base-color-teal-100: var(--base-color-neutral-1000);
  --base-color-teal-200: var(--base-color-neutral-900);
  --base-color-teal-300: var(--base-color-neutral-800);
  --base-color-teal-400: var(--base-color-neutral-700);
  --base-color-teal-500: var(--base-color-neutral-600);
  --base-color-teal-600: var(--base-color-neutral-500);
  --base-color-teal-700: var(--base-color-neutral-400);
  --base-color-teal-800: var(--base-color-neutral-300);
  --base-color-teal-900: var(--base-color-neutral-200);
  --base-color-teal-1000: var(--base-color-neutral-100);

  /* Yellow -> Red (primary is now red) */
  --base-color-yellow-100: var(--base-color-red-100);
  --base-color-yellow-200: var(--base-color-red-200);
  --base-color-yellow-300: var(--base-color-red-400);
  --base-color-yellow-400: var(--base-color-red-500);
  --base-color-yellow-500: var(--base-color-red-600);
  --base-color-yellow-600: var(--base-color-red-700);
  --base-color-yellow-700: var(--base-color-red-800);
  --base-color-yellow-800: var(--base-color-red-900);
  --base-color-yellow-900: var(--base-color-red-950);
  --base-color-yellow-1000: var(--base-color-red-950);
}

/* =============================================================================
   THEME COLOR TOKENS - USE THESE IN COMPONENTS
   ============================================================================= */

:root {
  /* ---------------------------------------------------------------------------
     BACKGROUNDS
     Pure blacks with subtle elevation through lightness
     --------------------------------------------------------------------------- */
  --theme-color-bg-0: #000000;
  --theme-color-bg-1: var(--base-color-neutral-50);
  --theme-color-bg-1-transparent: var(--base-color-black-transparent-80);
  --theme-color-bg-1-transparent-2: var(--base-color-black-transparent-50);
  --theme-color-bg-2: var(--base-color-neutral-100);
  --theme-color-bg-3: var(--base-color-neutral-200);
  --theme-color-bg-4: var(--base-color-neutral-300);
  --theme-color-bg-5: var(--base-color-neutral-400);
  --theme-color-bg-hover: var(--base-color-white-transparent-10);

  /* ---------------------------------------------------------------------------
     FOREGROUNDS
     Pure whites with subtle hierarchy
     --------------------------------------------------------------------------- */
  --theme-color-fg-highlight: #ffffff;
  --theme-color-fg-default-contrast: var(--base-color-neutral-900);
  --theme-color-fg-default: var(--base-color-neutral-800);
  --theme-color-fg-default-shy: var(--base-color-neutral-700);
  --theme-color-fg-muted: var(--base-color-neutral-600);
  --theme-color-fg-transparent: var(--base-color-white-transparent-15);

  /* ---------------------------------------------------------------------------
     PRIMARY - Noodl Red
     The one accent color - used sparingly for maximum impact
     --------------------------------------------------------------------------- */
  --theme-color-primary: #d21f3c;
  --theme-color-primary-highlight: var(--base-color-red-500);
  --theme-color-primary-dim: var(--base-color-red-800);
  --theme-color-on-primary: #ffffff;

  /* ---------------------------------------------------------------------------
     SECONDARY - White/Light
     For secondary actions, using white as the complement to red
     --------------------------------------------------------------------------- */
  --theme-color-secondary: #ffffff;
  --theme-color-secondary-dim: var(--base-color-neutral-700);
  --theme-color-secondary-highlight: #ffffff;
  --theme-color-secondary-bright: #ffffff;
  --theme-color-secondary-as-fg: var(--base-color-neutral-800);
  --theme-color-on-secondary: var(--base-color-neutral-100);

  /* ---------------------------------------------------------------------------
     NODE COLORS
     Muted, desaturated to not compete with the red accent
     --------------------------------------------------------------------------- */

  /* Data nodes - Muted Green */
  --theme-color-node-data-1: var(--base-color-node-green-700);
  --theme-color-node-data-2: var(--base-color-node-green-600);
  --theme-color-node-data-3: var(--base-color-node-green-500);
  --theme-color-node-data-dim: var(--base-color-node-green-900);

  /* Visual nodes - Muted Blue */
  --theme-color-node-visual-1: var(--base-color-node-blue-700);
  --theme-color-node-visual-2: var(--base-color-node-blue-600);
  --theme-color-node-visual-2-highlight: var(--base-color-node-blue-500);
  --theme-color-node-visual-highlight: var(--base-color-node-blue-200);
  --theme-color-node-visual-default: var(--base-color-node-blue-300);
  --theme-color-node-visual-shy: var(--base-color-node-blue-400);
  --theme-color-node-visual-dim: var(--base-color-node-blue-900);

  /* Custom nodes - Muted Pink */
  --theme-color-node-custom-1: var(--base-color-node-pink-700);
  --theme-color-node-custom-2: var(--base-color-node-pink-600);
  --theme-color-node-custom-dim: var(--base-color-node-pink-900);

  /* Logic nodes - Gray */
  --theme-color-node-logic-1: var(--base-color-node-grey-700);
  --theme-color-node-logic-2: var(--base-color-node-grey-600);
  --theme-color-node-logic-dim: var(--base-color-node-grey-900);

  /* Component nodes - Muted Purple */
  --theme-color-node-component-1: var(--base-color-node-purple-700);
  --theme-color-node-component-2: var(--base-color-node-purple-600);
  --theme-color-node-component-dim: var(--base-color-node-purple-900);

  /* ---------------------------------------------------------------------------
     STATUS COLORS
     Success stays green, everything else maps to the palette
     --------------------------------------------------------------------------- */
  --theme-color-success: var(--base-color-success-400);
  --theme-color-success-dim: var(--base-color-success-600);
  --theme-color-success-bg: var(--base-color-success-900);

  --theme-color-notice: var(--base-color-red-400);
  --theme-color-notice-dim: var(--base-color-red-600);
  --theme-color-notice-bg: var(--base-color-red-950);

  --theme-color-danger: var(--base-color-red-500);
  --theme-color-danger-light: var(--base-color-red-400);
  --theme-color-danger-dim: var(--base-color-red-700);
  --theme-color-danger-bg: var(--base-color-red-950);

  /* ---------------------------------------------------------------------------
     CONNECTION COLORS
     --------------------------------------------------------------------------- */
  --theme-color-signal: var(--base-color-red-500);
  --theme-color-data: var(--base-color-neutral-700);

  /* ---------------------------------------------------------------------------
     BORDERS
     Subtle white borders for dark backgrounds
     --------------------------------------------------------------------------- */
  --theme-color-border-default: var(--base-color-neutral-300);
  --theme-color-border-subtle: var(--base-color-neutral-200);
  --theme-color-border-strong: var(--base-color-neutral-400);

  /* ---------------------------------------------------------------------------
     FOCUS
     Red focus ring for accessibility
     --------------------------------------------------------------------------- */
  --theme-color-focus-ring: #d21f3c;
  --theme-color-focus-ring-offset: var(--base-color-neutral-50);
}

/* =============================================================================
   FUTURE: LIGHT THEME
   ============================================================================= 

.theme-light {
  --theme-color-bg-0: #ffffff;
  --theme-color-bg-1: var(--base-color-neutral-950);
  --theme-color-bg-1-transparent: rgba(255, 255, 255, 0.9);
  --theme-color-bg-1-transparent-2: rgba(255, 255, 255, 0.5);
  --theme-color-bg-2: #ffffff;
  --theme-color-bg-3: var(--base-color-neutral-900);
  --theme-color-bg-4: var(--base-color-neutral-800);
  --theme-color-bg-5: var(--base-color-neutral-700);
  --theme-color-bg-hover: rgba(0, 0, 0, 0.04);

  --theme-color-fg-highlight: #000000;
  --theme-color-fg-default-contrast: var(--base-color-neutral-100);
  --theme-color-fg-default: var(--base-color-neutral-200);
  --theme-color-fg-default-shy: var(--base-color-neutral-400);
  --theme-color-fg-muted: var(--base-color-neutral-500);

  --theme-color-primary: #d21f3c;
  --theme-color-on-primary: #ffffff;

  --theme-color-secondary: var(--base-color-neutral-100);
  --theme-color-on-secondary: #ffffff;

  --theme-color-border-default: var(--base-color-neutral-800);
  --theme-color-border-subtle: var(--base-color-neutral-900);
  --theme-color-border-strong: var(--base-color-neutral-700);
}

*/
