/* ==========================================================================
   Dry Out Masters — Design Tokens & CSS Variables
   Brand System: Trustworthy, Fast-Response, Professional, Emergency-Focused
   ========================================================================== */

:root {
  /* ── Primary Colors ── */
  /* Deep Ocean Blue — trust, reliability, water-industry connection */
  --color-primary-50: #E8F4FD;
  --color-primary-100: #C5E3F9;
  --color-primary-200: #91C8F3;
  --color-primary-300: #5DACED;
  --color-primary-400: #2E93E5;
  --color-primary-500: #0B6EC5;   /* Main primary */
  --color-primary-600: #0A5DA6;
  --color-primary-700: #084B87;
  --color-primary-800: #063968;
  --color-primary-900: #042849;

  /* ── Secondary Colors ── */
  /* Forest Teal — restoration, renewal, growth */
  --color-secondary-50: #E6F7F4;
  --color-secondary-100: #C0ECE4;
  --color-secondary-200: #80D9C9;
  --color-secondary-300: #40C6AE;
  --color-secondary-400: #1AB89C;
  --color-secondary-500: #0E9F86;   /* Main secondary */
  --color-secondary-600: #0C8671;
  --color-secondary-700: #096C5B;
  --color-secondary-800: #075346;
  --color-secondary-900: #043930;

  /* ── Accent Colors ── */
  /* Amber Alert — urgency, emergency, attention */
  --color-accent-50: #FFF8E6;
  --color-accent-100: #FFEDB8;
  --color-accent-200: #FFDD80;
  --color-accent-300: #FFCC47;
  --color-accent-400: #FFBF1A;
  --color-accent-500: #F5A800;   /* Main accent */
  --color-accent-600: #D49200;
  --color-accent-700: #B37B00;
  --color-accent-800: #926400;
  --color-accent-900: #714D00;

  /* ── Emergency Red ── */
  --color-emergency-50: #FDE8E8;
  --color-emergency-100: #F9C5C5;
  --color-emergency-200: #F38B8B;
  --color-emergency-300: #ED5151;
  --color-emergency-400: #E82424;
  --color-emergency-500: #D41111;   /* Main emergency */
  --color-emergency-600: #B30E0E;
  --color-emergency-700: #920B0B;
  --color-emergency-800: #710808;
  --color-emergency-900: #500606;

  /* ── Success Colors ── */
  --color-success-50: #E9F9EE;
  --color-success-100: #C7F0D3;
  --color-success-200: #8FE1A7;
  --color-success-300: #57D27B;
  --color-success-400: #2BC35A;
  --color-success-500: #18A844;
  --color-success-600: #148E3A;
  --color-success-700: #10742F;
  --color-success-800: #0C5A25;
  --color-success-900: #08401A;

  /* ── Warning Colors ── */
  --color-warning-50: #FFF7E6;
  --color-warning-100: #FFEAB8;
  --color-warning-200: #FFD580;
  --color-warning-300: #FFC047;
  --color-warning-400: #FFAB1A;
  --color-warning-500: #F59600;
  --color-warning-600: #D48000;
  --color-warning-700: #B36A00;
  --color-warning-800: #925400;
  --color-warning-900: #713E00;

  /* ── Error Colors ── */
  --color-error-50: #FDE8EC;
  --color-error-100: #F9C5CE;
  --color-error-200: #F38B9D;
  --color-error-300: #ED516C;
  --color-error-400: #E8244A;
  --color-error-500: #D41132;
  --color-error-600: #B30E2A;
  --color-error-700: #920B22;
  --color-error-800: #71081A;
  --color-error-900: #500612;

  /* ── Neutral Grayscale ── */
  --color-neutral-0: #FFFFFF;
  --color-neutral-50: #F8F9FA;
  --color-neutral-100: #F1F3F5;
  --color-neutral-200: #E9ECEF;
  --color-neutral-300: #DEE2E6;
  --color-neutral-400: #CED4DA;
  --color-neutral-500: #ADB5BD;
  --color-neutral-600: #868E96;
  --color-neutral-700: #495057;
  --color-neutral-800: #343A40;
  --color-neutral-900: #212529;
  --color-neutral-950: #0D1117;

  /* ── Typography ── */
  /* Headings: Montserrat — bold, modern, authoritative */
  --font-heading: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  /* Body: Inter — clean, legible, professional */
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  /* Mono: JetBrains Mono — for technical details */
  --font-mono: 'JetBrains Mono', 'Consolas', monospace;

  /* Font Sizes — fluid clamp() */
  --text-xs: clamp(0.7rem, 0.65rem + 0.25vw, 0.75rem);
  --text-sm: clamp(0.8rem, 0.75rem + 0.25vw, 0.875rem);
  --text-base: clamp(0.938rem, 0.875rem + 0.3125vw, 1rem);
  --text-lg: clamp(1.063rem, 0.975rem + 0.4375vw, 1.125rem);
  --text-xl: clamp(1.15rem, 1rem + 0.75vw, 1.25rem);
  --text-2xl: clamp(1.35rem, 1.1rem + 1.25vw, 1.5rem);
  --text-3xl: clamp(1.6rem, 1.25rem + 1.75vw, 1.875rem);
  --text-4xl: clamp(1.9rem, 1.4rem + 2.5vw, 2.25rem);
  --text-5xl: clamp(2.2rem, 1.5rem + 3.5vw, 3rem);
  --text-6xl: clamp(2.5rem, 1.5rem + 5vw, 3.75rem);

  /* Line Heights */
  --leading-none: 1;
  --leading-tight: 1.15;
  --leading-snug: 1.3;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  --leading-loose: 1.8;

  /* Font Weights */
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;
  --weight-black: 900;

  /* Letter Spacing */
  --tracking-tight: -0.025em;
  --tracking-normal: 0;
  --tracking-wide: 0.025em;
  --tracking-wider: 0.05em;
  --tracking-widest: 0.1em;

  /* ── Shadows ── */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.06);
  --shadow-glow-primary: 0 0 20px rgba(11, 110, 197, 0.3);
  --shadow-glow-emergency: 0 0 20px rgba(212, 17, 17, 0.3);

  /* ── Border Radius ── */
  --radius-none: 0;
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.5rem;
  --radius-full: 9999px;

  /* ── Spacing ── */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* ── Layout ── */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;
  --container-2xl: 1440px;
  --container-padding: clamp(1rem, 3vw, 2rem);

  /* ── Z-Index ── */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-modal-backdrop: 400;
  --z-modal: 500;
  --z-popover: 600;
  --z-tooltip: 700;
  --z-emergency-banner: 800;

  /* ── Transitions ── */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 350ms ease;
  --transition-spring: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Button Tokens ── */
  --btn-padding-x: 1.5rem;
  --btn-padding-y: 0.75rem;
  --btn-font-size: var(--text-base);
  --btn-font-weight: var(--weight-semibold);
  --btn-radius: var(--radius-lg);
  --btn-padding-x-sm: 1rem;
  --btn-padding-y-sm: 0.5rem;
  --btn-padding-x-lg: 2rem;
  --btn-padding-y-lg: 1rem;

  /* ── Form Tokens ── */
  --input-padding-x: 1rem;
  --input-padding-y: 0.75rem;
  --input-radius: var(--radius-md);
  --input-border-color: var(--color-neutral-300);
  --input-focus-color: var(--color-primary-500);
  --input-bg: var(--color-neutral-0);
  --input-text: var(--color-neutral-900);
  --input-placeholder: var(--color-neutral-500);
}