/* ==========================================================================
   Go Laundry — Design Tokens
   Breakpoints (mobile-first): 360px (base) / 768px / 1024px / 1440px
   ========================================================================== */

:root {
  /* Navy */
  --color-navy-900: #0a1b33;
  --color-navy-800: #12294a;
  --color-navy-700: #1d3a63;
  --color-navy-600: #2c4e7c;
  --color-navy-100: #e7edf6;

  /* Orange */
  --color-orange-600: #e0630f;
  --color-orange-500: #f5811f;
  --color-orange-400: #ff9a45;
  --color-orange-100: #ffe8d6;

  /* Sky / light-blue gradient */
  --color-sky-50: #f7fbff;
  --color-sky-100: #e9f3fd;
  --color-sky-200: #d3e8fb;
  --color-sky-300: #aed0f0;

  --gradient-hero: linear-gradient(160deg, var(--color-sky-50) 0%, var(--color-sky-200) 100%);
  --gradient-page: linear-gradient(180deg, var(--color-sky-300) 0%, var(--color-sky-100) 34%, var(--color-sky-200) 100%);
  --gradient-navy: linear-gradient(160deg, var(--color-navy-800) 0%, var(--color-navy-900) 100%);
  --gradient-cta: linear-gradient(135deg, var(--color-orange-400) 0%, var(--color-orange-500) 100%);

  /* Glass */
  --glass-bg: rgba(255, 255, 255, 0.55);
  --glass-bg-navy: rgba(255, 255, 255, 0.08);
  --glass-border: rgba(255, 255, 255, 0.5);
  --glass-border-navy: rgba(255, 255, 255, 0.16);
  --glass-blur: 20px;
  --glass-shadow: 0 8px 32px rgba(10, 27, 51, 0.12);
  --color-glow: rgba(245, 129, 31, 0.35);

  /* Neutrals / text */
  --color-white: #ffffff;
  --color-ink: #17253d;
  --color-slate: #4c5c74;
  --color-ink-inverse: #f4f8fd;
  --color-slate-inverse: #b9c8de;

  /* Spacing scale */
  --spacing-2xs: 4px;
  --spacing-xs: 8px;
  --spacing-sm: 12px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 48px;
  --spacing-3xl: 64px;
  --spacing-4xl: 96px;

  /* Typography */
  --font-heading: -apple-system, "Segoe UI", "Trebuchet MS", Verdana, sans-serif;
  --font-body: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-script: "Segoe Script", "Brush Script MT", "Lucida Handwriting", cursive;

  --font-size-xs: 0.8rem;
  --font-size-sm: 0.9rem;
  --font-size-base: 1rem;
  --font-size-md: 1.125rem;
  --font-size-lg: 1.375rem;
  --font-size-xl: 1.75rem;
  --font-size-2xl: 2.25rem;
  --font-size-3xl: 3rem;
  --font-size-4xl: 3.75rem;

  /* Radius scale */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;
  --radius-circle: 50%;

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(10, 27, 51, 0.08);
  --shadow-md: 0 6px 20px rgba(10, 27, 51, 0.12);
  --shadow-lg: 0 16px 40px rgba(10, 27, 51, 0.18);
  --shadow-glass: var(--glass-shadow);
  --shadow-glow-orange: 0 6px 24px var(--color-glow);

  /* Motion */
  --transition-fast: 200ms ease;
  --transition-base: 300ms ease-in-out;
  --transition-slow: 400ms ease-in-out;

  /* Z-index scale */
  --z-bubbles: -1;
  --z-base: 1;
  --z-header: 100;
  --z-overlay: 200;

  /* Container widths */
  --container-max: 1140px;
  --container-max-lg: 1300px;
}