/* =========================================================================
   SayarHub — design tokens
   One source of truth for colour, depth, type and motion.
   ========================================================================= */

:root {
  /* ---- dark showroom ---------------------------------------------------- */
  --bg-canvas:       #0B0C0E;
  --bg-elevated:     #14161A;
  --bg-surface:      #1B1E24;
  --bg-surface-2:    #22262E;
  --border-hairline: rgba(255, 255, 255, .06);
  --border-strong:   rgba(255, 255, 255, .12);

  --text-primary:    #F3F4F6;
  /* Lightened with --text-muted below. The two sat 1.22x apart while primary was
     2.49x above secondary — a three-step scale squeezed flat at the bottom, where
     nearly all of it is 11-13px uppercase label text. Now 1.86x / 1.41x. */
  --text-secondary:  #B2BAC6;
  /* Lightened from #6B7280, which failed WCAG AA against every surface it is
     used on: 4.05 on the canvas, 3.75 on elevated, 3.45 on surface, 3.14 on
     surface-2 — all under the 4.5 small text needs. It read as dark grey on dark
     grey, which is what it was. Now 5.72 at worst.

     EVERY use of this token is 11-13px, most of it uppercase with wide letter
     spacing: card subtitles, spec labels, breadcrumbs, the price note, form hints,
     the dealer card. It is the smallest text in the product, so it cannot also be
     the dimmest. */
  --text-muted:      #95A0AF;

  --accent:          #C9A24B;   /* champagne gold */
  --accent-hover:    #DDB460;
  --accent-dim:      rgba(201, 162, 75, .16);
  --accent-line:     rgba(201, 162, 75, .38);

  --whatsapp:        #25D366;
  --whatsapp-deep:   #128C7E;
  --success:         #4ADE80;
  --danger:          #F87171;
  --warning:         #FBBF24;

  /* ---- light admin canvas ---------------------------------------------- */
  --light-canvas:    #FAFAF7;
  --light-surface:   #FFFFFF;
  --light-surface-2: #F4F3EE;
  --light-border:    #E9E7E1;
  --light-text:      #1A1B1E;
  --light-text-2:    #5C5E66;
  --light-text-3:    #8A8C94;

  /* ---- depth -----------------------------------------------------------
     Two shadows per level: a tight contact shadow that anchors the element
     to the surface, and a wide ambient one that gives it air. Flat design
     uses one; this uses both, which is what reads as "considered".          */
  --shadow-1: 0 1px 2px rgba(0,0,0,.32),
              0 2px 8px  rgba(0,0,0,.18);
  --shadow-2: 0 2px 4px rgba(0,0,0,.36),
              0 8px 24px rgba(0,0,0,.24);
  --shadow-3: 0 4px 8px  rgba(0,0,0,.40),
              0 18px 44px rgba(0,0,0,.34);
  --shadow-4: 0 8px 16px rgba(0,0,0,.44),
              0 32px 72px rgba(0,0,0,.44);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,.05);

  /* light-canvas equivalents — softer, warmer, never grey-blue */
  --shadow-l1: 0 1px 2px rgba(38,34,24,.06),
               0 2px 8px  rgba(38,34,24,.05);
  --shadow-l2: 0 2px 4px rgba(38,34,24,.07),
               0 10px 24px rgba(38,34,24,.07);
  --shadow-l3: 0 6px 12px rgba(38,34,24,.08),
               0 22px 48px rgba(38,34,24,.10);

  /* ---- radii — never fully rounded on containers ------------------------ */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 24px;

  /* ---- spacing (4px base) ---------------------------------------------- */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 20px;  --s-6: 24px;  --s-8: 32px;  --s-10: 40px;
  --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px;
  --s-32: 128px;

  /* ---- type ------------------------------------------------------------- */
  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* ---- motion -----------------------------------------------------------
     Spring-ish cubic-beziers. Nothing here is a linear ease.                */
  --ease-spring: cubic-bezier(.22, 1, .36, 1);
  --ease-out:    cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --t-fast:   180ms;
  --t-base:   250ms;
  --t-slow:   400ms;
  --t-modal:  350ms;

  /* ---- layout ----------------------------------------------------------- */
  --page-max: 1360px;
  --gutter: clamp(20px, 5vw, 64px);
  --nav-h: 76px;
}

/* Motion is decoration. When it is unwelcome, remove it entirely rather
   than shortening it — a 0.01s animation still causes vestibular trouble. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}