/* ============================================================================
   garaliving — Design Tokens (source of truth)
   Every color / spacing / type / radius / shadow / motion value lives HERE.
   No other stylesheet may declare a raw hex or off-scale px value.
   ========================================================================== */

:root {
  /* --- Warm neutral ramp ------------------------------------------------ */
  --color-neutral-0:   #ffffff;  /* card / surface white          */
  --color-neutral-50:  #faf8f4;  /* cream page background         */
  --color-neutral-100: #f2eee7;  /* warm section tint             */
  --color-neutral-200: #e6e0d6;  /* borders / hairlines           */
  --color-neutral-300: #d3cabb;  /* subtle dividers               */
  --color-neutral-400: #a89e8d;  /* disabled text / placeholder   */
  --color-neutral-500: #857b6c;  /* captions                      */
  --color-neutral-600: #6b6252;  /* muted body text               */
  --color-neutral-700: #4a4437;  /* strong secondary text         */
  --color-neutral-800: #2b2a27;  /* near-ink body                 */
  --color-neutral-900: #1a1a1a;  /* deepest text                  */

  /* --- Brand navy + semantic ------------------------------------------- */
  --color-navy:          #14243d;  /* PRIMARY — logo ink, headings, CTAs */
  --color-navy-hover:    #1d3358;  /* CTA hover (lighter navy)           */
  --color-navy-active:   #0d1a2e;  /* CTA pressed (darker navy)          */
  --color-cream:         #faf8f4;  /* brand background field             */

  --color-primary:        var(--color-navy);
  --color-primary-hover:  var(--color-navy-hover);
  --color-primary-active: var(--color-navy-active);
  --color-secondary:      #6b6252;  /* warm neutral — quiet emphasis */

  --color-success:        #2f6b3f;  /* muted green   */
  --color-warning:        #9a6a1c;  /* muted amber   */
  --color-danger:         #a13328;  /* muted terracotta-red */
  --color-info:           var(--color-navy);

  /* --- Semantic surface / text aliases --------------------------------- */
  --color-bg:            var(--color-cream);
  --color-surface:       var(--color-neutral-0);
  --color-surface-alt:   var(--color-neutral-100);
  --color-border:        var(--color-neutral-200);
  --color-divider:       var(--color-neutral-300);
  --color-text:          var(--color-neutral-800);
  --color-heading:       var(--color-navy);
  --color-text-muted:    var(--color-neutral-600);
  --color-text-subtle:   var(--color-neutral-500);
  --color-text-on-brand: var(--color-cream);
  --color-focus-ring:    var(--color-navy);

  /* --- Spacing scale (fixed 4 / 8) ------------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* --- Typography ------------------------------------------------------ */
  --font-display: "Poppins", "Century Gothic", system-ui, -apple-system, sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    ui-monospace, "SFMono-Regular", "Menlo", monospace;

  --tracking-wordmark: 0.02em;
  --tracking-eyebrow:  0.18em;
  --tracking-normal:   0;

  --text-xs:   0.75rem;   /* 12px — caption    */
  --text-sm:   0.875rem;  /* 14px — label      */
  --text-base: 1rem;      /* 16px — body       */
  --text-lg:   1.125rem;  /* 18px — lead body  */
  --text-xl:   1.25rem;   /* 20px — h5/h6      */
  --text-2xl:  1.5rem;    /* 24px — h4         */
  --text-3xl:  1.875rem;  /* 30px — h3         */
  --text-4xl:  2.25rem;   /* 36px — h2         */
  --text-5xl:  3rem;      /* 48px — h1/display */

  --leading-tight: 1.2;
  --leading-body:  1.6;
  --measure:       68ch;

  /* --- Radius / elevation / motion ------------------------------------- */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-full: 9999px;

  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, .10);
  --shadow-lg: 0 12px 32px rgba(15, 23, 42, .14);

  /* Overlays / scrims (navy-based, for modal backdrop & image hover) */
  --scrim-modal: rgba(13, 26, 46, 0.6);
  --scrim-image: rgba(20, 36, 61, 0.12);
  /* Hero: light cream scrim so navy text stays readable over a bright photo */
  --scrim-hero: rgba(250, 248, 244, 0.94);
  --scrim-hero-soft: rgba(250, 248, 244, 0.70);
  /* Mobile hero: cream veil strong enough to keep navy text readable over the
     photo, then fading out below the text block */
  --scrim-hero-m: rgba(250, 248, 244, 0.90);
  --scrim-hero-m-soft: rgba(250, 248, 244, 0.72);
  /* Soft cream halo behind hero text for extra legibility on the photo */
  --text-halo: 0 1px 12px rgba(250, 248, 244, 0.95), 0 2px 4px rgba(250, 248, 244, 0.9);
  /* Unifying photo treatment — keeps mixed stock photos on the warm palette */
  --img-tone: saturate(0.82) brightness(1.03) contrast(0.97) sepia(0.08);

  --motion-fast: 120ms;
  --motion-base: 200ms;
  --motion-ease: cubic-bezier(.2, .0, .2, 1);

  /* --- Layout ---------------------------------------------------------- */
  --container-max: 1200px;
  --container-pad: var(--space-4);

  /* named breakpoints (min-width, mobile-first):
     sm 480px · md 768px · lg 1024px · xl 1280px */
}