/* =============================================================================
   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
     Subtle variations to distinguish node types on canvas
     Using desaturated colors so they don't compete with the red accent
     --------------------------------------------------------------------------- */

  /* Node-Pink - For Custom/User nodes */
  --base-color-node-pink-100: #fdf2f8;
  --base-color-node-pink-200: #f5d0e5;
  --base-color-node-pink-300: #e8a8ca;
  --base-color-node-pink-400: #d87caa;
  --base-color-node-pink-500: #c2578a;
  --base-color-node-pink-600: #a63d6f;
  --base-color-node-pink-700: #862d56;
  --base-color-node-pink-800: #6b2445;
  --base-color-node-pink-900: #521c35;
  --base-color-node-pink-1000: #2d0e1c;

  /* Node-Purple - For Component nodes */
  --base-color-node-purple-100: #f8f5fa;
  --base-color-node-purple-200: #e8dff0;
  --base-color-node-purple-300: #d4c4e3;
  --base-color-node-purple-400: #b8a0cf;
  --base-color-node-purple-500: #9a7bb8;
  --base-color-node-purple-600: #7d5a9e;
  --base-color-node-purple-700: #624382;
  --base-color-node-purple-800: #4b3366;
  --base-color-node-purple-900: #37264b;
  --base-color-node-purple-1000: #1e1429;

  /* Node-Green - For Data nodes */
  --base-color-node-green-100: #f4f7f4;
  --base-color-node-green-200: #d8e5d8;
  --base-color-node-green-300: #b5cfb5;
  --base-color-node-green-400: #8eb58e;
  --base-color-node-green-500: #6a996a;
  --base-color-node-green-600: #4d7d4d;
  --base-color-node-green-700: #3a613a;
  --base-color-node-green-800: #2c4a2c;
  --base-color-node-green-900: #203520;
  --base-color-node-green-1000: #111c11;

  /* Node-Gray - For Logic nodes */
  --base-color-node-grey-100: #f5f5f5;
  --base-color-node-grey-200: #e0e0e0;
  --base-color-node-grey-300: #c2c2c2;
  --base-color-node-grey-400: #9e9e9e;
  --base-color-node-grey-500: #757575;
  --base-color-node-grey-600: #5c5c5c;
  --base-color-node-grey-700: #454545;
  --base-color-node-grey-800: #333333;
  --base-color-node-grey-900: #212121;
  --base-color-node-grey-1000: #0d0d0d;

  /* Node-Blue - For Visual nodes */
  --base-color-node-blue-100: #f4f6f8;
  --base-color-node-blue-200: #dce3eb;
  --base-color-node-blue-300: #bccad9;
  --base-color-node-blue-400: #96adc2;
  --base-color-node-blue-500: #7090a9;
  --base-color-node-blue-600: #53758f;
  --base-color-node-blue-700: #3e5a72;
  --base-color-node-blue-800: #2f4557;
  --base-color-node-blue-900: #22323f;
  --base-color-node-blue-1000: #121b22;

  /* ---------------------------------------------------------------------------
     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);
}

*/
