/* ==========================================================================
   Wash N Go — Design Tokens
   Palette extracted from the brand logo (WashNGo Logo v2): forest green
   outline, fresh leaf green, mint water-drop, warm cream machine body.
   Executed sober/premium per validated direction — mascot stays confined
   to nav/footer/favicon, rest of the UI stays clean and editorial.
   ========================================================================== */

:root {
  /* --- Color: core (from logo) --- */
  --color-ink:          #14351C;   /* forest green — dark sections, headings */
  --color-ink-soft:     #1D4527;
  --color-primary:      #2E6B3E;   /* deep grass green — buttons, links, CTA */
  --color-primary-dark: #204B2C;
  --color-leaf:         #8FBB55;   /* bright leaf green — highlights, badges */
  --color-mint:         #93C7A6;   /* water-drop mint — soft accents, glows */
  --color-cream:        #F6F5EC;   /* machine-body cream — warm surfaces */

  --color-bg:           #FFFFFF;
  --color-surface:      #F6F5EC;   /* cream surface, echoes the logo */
  --color-surface-2:    #EEF0E4;
  --color-fg:           #14351C;
  --color-fg-muted:     #5B6B57;
  --color-border:       #E1E5D8;

  --color-destructive:  #DC2626;   /* SAV / urgent */
  --color-destructive-bg: #FDF1F1;
  --color-success:      #2E6B3E;

  --color-on-primary:   #FFFFFF;
  --color-on-ink:       #F6F5EC;

  /* --- Typography --- */
  --font-heading: 'Outfit', 'Segoe UI', sans-serif;
  --font-body:    'Inter', 'Segoe UI', sans-serif;

  --fs-2xs: 0.75rem;   /* 12px */
  --fs-xs:  0.8125rem; /* 13px */
  --fs-sm:  0.9375rem; /* 15px */
  --fs-base: 1rem;     /* 16px */
  --fs-md:  1.125rem;  /* 18px */
  --fs-lg:  1.375rem;  /* 22px */
  --fs-xl:  1.75rem;   /* 28px */
  --fs-2xl: 2.25rem;   /* 36px */
  --fs-3xl: 3rem;      /* 48px */
  --fs-4xl: 4rem;      /* 64px */
  --fs-5xl: 5.5rem;    /* 88px */

  --lh-tight: 1.1;
  --lh-snug:  1.3;
  --lh-body:  1.65;

  /* --- Spacing (8pt rhythm) --- */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4rem;
  --space-7: 6rem;
  --space-8: 8rem;
  --space-9: 10rem;

  /* --- Layout --- */
  --container-max: 1280px;
  --container-pad: clamp(1.25rem, 4vw, 3rem);
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  /* --- Motion --- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 200ms;
  --dur-base: 350ms;
  --dur-slow: 600ms;

  /* --- Elevation --- */
  --shadow-sm: 0 1px 2px rgba(20, 53, 28, 0.06);
  --shadow-md: 0 8px 24px rgba(20, 53, 28, 0.08);
  --shadow-lg: 0 24px 64px rgba(20, 53, 28, 0.16);
  --shadow-glow: 0 0 0 1px rgba(147, 199, 166, 0.25), 0 20px 60px rgba(46, 107, 62, 0.18);

  --z-nav: 100;
  --z-overlay: 200;
}