/* Define the custom property for the rotation angle (CSS Houdini) */
@property --angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

@property --gradient-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

@property --gradient-angle-offset {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

@property --gradient-percent {
  syntax: "<percentage>";
  initial-value: 20%;
  inherits: false;
}

@property --gradient-shine {
  syntax: "<color>";
  initial-value: #8484ff;
  inherits: false;
}

:root {
  /* ===== Primary Brand Colors ===== */
  --net-white-color: #ffffff;
  --net-primary-color: #FF5B00;
  --net-white-color-rgb: 255, 255, 255;
  --primary-indigo: #4132a2;
  
  /* ===== Background Colors ===== */
  --bg-black: #000000;
  --bg-dark: #050505;
  --bg-dark-alt: #0A0A0A;
  --bg-zinc-900: #09090B;
  --bg-zinc-800: #18181B;
  --bg-neutral-900: #1A1A1A;
  --bg-neutral-800: #2A2A2A;
  --bg-neutral-700: #2C2C2C;
  --bg-gray-dark: #1a1818;
  
  /* ===== Text Colors ===== */
  --text-white: #ffffff;
  --text-light: #e5e5e5;
  --text-gray-light: #d1d5db;
  --text-gray: #A3A3A3;
  --text-gray-medium: #9CA3AF;
  --text-gray-dark: #737373;
  --text-neutral-600: #525252;
  --text-neutral-500: #565656;
  --text-dark: #111;
  --text-charcoal: #404040;
  --text-medium-gray: #666;
  
  /* ===== Orange Shades ===== */
  --orange-primary: #FF5B00;
  --orange-light: #FF7A2F;
  --orange-bright: #FF8C00;
  --orange-hover: #ff7a1a;
  
  /* ===== Purple Shades ===== */
  --purple-deep: #260371;
  --purple-primary: #4132a2;
  
  /* ===== Brown Shades ===== */
  --brown-dark: #4A1D0F;
  
  /* ===== Blue Shades ===== */
  --blue-primary: #006FFF;
  --blue-indigo: #1d4ed8;
  --blue-link: #4169e1;
  --blue-focus: #21759b;
  
  /* ===== Green Shades ===== */
  --green-emerald: #047857;
  --green-light: #BBF7D0;
  
  /* ===== Red Shades ===== */
  --red-light: #FCA5A5;
  
  /* ===== Peach/Orange Light Shades ===== */
  --peach-light: #FED7AA;
  
  /* ===== Border Colors ===== */
  --border-light: #ccc;
  --border-medium: #bbb;
  --border-dark: #aaa;
  --border-gray: #eee;
  --border-light-gray: #f1f1f1;
  
  /* ===== Button Colors ===== */
  --btn-text-color: #ffffff;
  --btn-bg-start: #4a1d0f; /* dark brown */
  --btn-bg-end: #260371; /* deep purple */
  --btn-bg-hover-start: #5a2515;
  --btn-bg-hover-end: #3a1596;
  --btn-border-glow: #ff5b00;
  --btn-border-glow-hover: #ff7a1a;
  --btn-glow-shadow: rgba(255, 91, 0, 0.35);
  --btn-glow-shadow-active: rgba(255, 91, 0, 0.25);
  --btn-ambient-glow: rgba(255, 91, 0, 0.6);
  --btn-focus-ring: rgba(255, 91, 0, 0.4);
  --btn-text-shadow: rgba(0, 0, 0, 0.25);
  --btn-border-dark-shade: rgba(0, 0, 0, 0.8);
  --btn-bg-light: #e6e6e6;
  
  /* ===== Highlight/Accent Colors ===== */
  --highlight-yellow: #fff9c0;
  
  /* ===== Transparent/Overlay Colors ===== */
  --overlay-black-light: rgba(0, 0, 0, 0.066);
  --overlay-black-medium: rgba(0, 0, 0, 0.3);
  --overlay-black-dark: rgba(0, 0, 0, 0.54);
  --overlay-black-darker: rgba(0, 0, 0, 0.6);
  --overlay-black-darkest: rgba(0, 0, 0, 0.8);
  
  --overlay-white-subtle: rgba(255, 255, 255, 0.03);
  --overlay-white-light: rgba(255, 255, 255, 0.05);
  --overlay-white-medium: rgba(255, 255, 255, 0.1);
  --overlay-white-visible: rgba(255, 255, 255, 0.2);
  --overlay-white-strong: rgba(255, 255, 255, 0.3);
  --overlay-white-stronger: rgba(255, 255, 255, 0.4);
  --overlay-white-bright: rgba(255, 255, 255, 0.6);
  --overlay-white-very-bright: rgba(255, 255, 255, 0.7);
  --overlay-white-almost-solid: rgba(255, 255, 255, 0.8);
  --overlay-white-near-solid: rgba(255, 255, 255, 0.9);
  
  --overlay-orange-subtle: rgba(255, 91, 0, 0);
  --overlay-orange-faint: rgba(255, 91, 0, 0.03);
  --overlay-orange-light: rgba(255, 91, 0, 0.08);
  --overlay-orange-medium: rgba(255, 91, 0, 0.1);
  --overlay-orange-visible: rgba(255, 91, 0, 0.15);
  --overlay-orange-strong: rgba(255, 91, 0, 0.2);
  --overlay-orange-stronger: rgba(255, 91, 0, 0.22);
  --overlay-orange-bright: rgba(255, 91, 0, 0.3);
  
  --overlay-blue-subtle: rgba(0, 111, 255, 0);
  --overlay-blue-strong: rgba(0, 111, 255, 0.2);
  
  --overlay-zinc-dark: rgba(24, 24, 27, 0.7);
  
  --overlay-gray-light: rgba(23, 23, 23, 0.26);
  --overlay-gray-medium: rgba(23, 23, 23, 0.3);
  --overlay-gray-dark: rgba(104, 104, 104, 0.26);
  
  --overlay-red-subtle: rgba(239, 68, 68, 0.05);
  --overlay-red-light: rgba(239, 68, 68, 0.1);
  --overlay-red-medium: rgba(239, 68, 68, 0.2);
  --overlay-red-strong: rgba(239, 68, 68, 0.3);
  --overlay-red-stronger: rgba(239, 68, 68, 0.4);
  --overlay-red-bright: rgba(239, 68, 68, 0.5);
  
  --overlay-peach-light: rgba(251, 146, 60, 0.1);
  --overlay-peach-medium: rgba(251, 146, 60, 0.2);
  --overlay-peach-strong: rgba(251, 146, 60, 0.3);
  --overlay-peach-bright: rgba(251, 146, 60, 0.4);
  
  --overlay-coral-light: rgba(255, 107, 53, 0.1);
  --overlay-coral-medium: rgba(255, 107, 53, 0.2);
  --overlay-coral-strong: rgba(255, 107, 53, 0.3);
  --overlay-coral-bright: rgba(255, 107, 53, 0.5);
  
  --overlay-orange-hover: rgba(255, 122, 26, 0.6);
  
  /* ===== RGB Values (for rgba usage) ===== */
  --rgb-orange: 255, 91, 0;
  --rgb-white: 255, 255, 255;
  --rgb-black: 0, 0, 0;
  --rgb-blue: 0, 111, 255;
  --rgb-zinc: 24, 24, 27;
  --rgb-gray-light: 23, 23, 23;
  --rgb-gray-dark: 104, 104, 104;
  --rgb-red: 239, 68, 68;
  --rgb-peach: 251, 146, 60;
  --rgb-coral: 255, 107, 53;
  --rgb-orange-hover: 255, 122, 26;
}