/* ============================================================
   tokens.css — Design-system CSS custom properties
   NeatSpaceCare. Single source of all design tokens.
   Every color/space/type used in the build must reference
   a token from this file — no raw hex values in components.
   ============================================================ */

:root {
  /* ── Colour: raw palette ── */
  --color-olive:        #6B7C3A;
  --color-olive-light:  #8A9A5B;
  --color-olive-dark:   #4A5728;
  --color-terra:        #B85C38;
  --color-terra-dark:   #8F4429;
  --color-terra-light:  #D4795A;
  --color-charcoal:     #1E2820;
  --color-charcoal-mid: #2C3A2E;
  --color-cream:        #F5F0E8;
  --color-cream-dark:   #EDE6D6;
  --color-white:        #FDFCF9;
  --color-stone:        #C8BEA8;
  --color-stone-dark:   #9A8E78;
  --color-black:        #0F120F;

  /* ── Colour: semantic ── */
  --bg-page:              var(--color-white);
  --bg-section-light:     var(--color-white);
  --bg-section-tint:      var(--color-cream);
  --bg-section-dark:      var(--color-charcoal);
  --bg-section-olive:     #E8EBD8;
  --bg-card:              var(--color-white);
  --bg-card-dark:         var(--color-charcoal-mid);
  --bg-input:             var(--color-white);
  --bg-input-focus:       var(--color-cream);

  --color-text-primary:           var(--color-charcoal);
  --color-text-heading:           var(--color-charcoal);
  --color-text-muted:             var(--color-stone-dark);
  --color-text-inverted:          #F0ECE4;
  --color-text-inverted-muted:    var(--color-stone);
  --color-text-heading-inverted:  #FDFCF9;
  --color-text-on-terra:          #FDFCF9;
  --color-text-on-olive:          #FDFCF9;

  --color-accent:       var(--color-terra);
  --color-accent-hover: var(--color-terra-dark);
  --color-brand:        var(--color-olive);
  --color-brand-hover:  var(--color-olive-dark);

  --color-border:             var(--color-cream-dark);
  --color-border-dark:        rgba(255,255,255,0.12);
  --color-border-input:       var(--color-stone);
  --color-border-input-focus: var(--color-olive);
  --color-border-input-error: #C0392B;

  --color-success:    #3B7A4A;
  --color-error:      #C0392B;
  --color-focus-ring: var(--color-terra);
  --color-overlay:    rgba(30,40,32,0.55);

  /* ── Typography ── */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body:    'DM Sans', system-ui, -apple-system, sans-serif;

  --fs-display: clamp(3rem, 6vw, 5rem);
  --fs-h1:      clamp(2.5rem, 5vw, 4rem);
  --fs-h2:      clamp(2rem, 4vw, 3rem);
  --fs-h3:      clamp(1.625rem, 3vw, 2rem);
  --fs-h4:      1.5rem;
  --fs-lead:    1.25rem;
  --fs-body:    1rem;
  --fs-small:   0.875rem;
  --fs-xs:      0.75rem;
  --fs-stat:    clamp(2.5rem, 4vw, 3.5rem);
  --fs-nav:     0.9375rem;
  --fs-button:  0.9375rem;
  --fs-label:   0.75rem;

  /* ── Spacing (4/8 base) ── */
  --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;

  /* Section padding */
  --section-pad: var(--space-16);

  /* ── Layout ── */
  --container-max:    1280px;
  --container-narrow: 800px;
  --container-wide:   1440px;

  /* ── Radii ── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-pill: 9999px;
  --radius-none: 0;

  /* ── Borders ── */
  --border-width:       1px;
  --border-width-thick: 2px;
  --border-default:     1px solid var(--color-border);
  --border-dark:        1px solid var(--color-border-dark);
  --border-input:       1px solid var(--color-border-input);
  --border-input-focus: 2px solid var(--color-border-input-focus);

  /* ── Shadows ── */
  --shadow-sm: 0 1px 3px rgba(30,40,32,0.08), 0 1px 2px rgba(30,40,32,0.06);
  --shadow-md: 0 4px 16px rgba(30,40,32,0.10), 0 2px 6px rgba(30,40,32,0.06);
  --shadow-lg: 0 12px 40px rgba(30,40,32,0.14), 0 4px 12px rgba(30,40,32,0.08);

  /* ── Transitions ── */
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;
  --transition-drawer: 320ms cubic-bezier(0.25,0.46,0.45,0.94);

  /* ── Z-index scale ── */
  --z-header:  500;
  --z-drawer:  600;
  --z-overlay: 700;
  --z-banner:  800;
  --z-modal:   900;
}

@media (min-width: 768px) {
  :root { --section-pad: var(--space-20); }
}
@media (min-width: 1024px) {
  :root { --section-pad: var(--space-24); }
}