/* ==========================================================================
   Escorts Near Me : design tokens
   A single source of truth for colour, type, space, radius and elevation.
   Everything downstream references these, so a rebrand is one file deep.
   ========================================================================== */

:root {

  /* --- Canvas and surfaces -------------------------------------------------
     The site sits on a warm white. Pure #fff is reserved for cards and rails
     so they lift off the page without needing heavy shadows. */
  --enm-canvas:        #ffffff;
  --enm-canvas-warm:   #faf9f6;
  --enm-surface:       #ffffff;
  --enm-surface-sunk:  #f5f3ef;
  --enm-surface-veil:  #efece6;

  /* --- Ink ---------------------------------------------------------------- */
  --enm-ink:           #17140f;
  --enm-ink-strong:    #0d0b08;
  --enm-ink-muted:     #4c463c;
  --enm-ink-soft:      #837b6d;
  --enm-ink-faint:     #a9a196;
  --enm-ink-invert:    #ffffff;

  /* --- Lines -------------------------------------------------------------- */
  --enm-line:          #e9e5dd;
  --enm-line-strong:   #d8d2c6;
  --enm-line-hair:     rgba(23, 20, 15, 0.08);

  /* --- Champagne accent ---------------------------------------------------
     Used sparingly: rules, active states, price, small caps labels. */
  --enm-gold:          #b0894f;
  --enm-gold-deep:     #8a6a37;
  --enm-gold-bright:   #c9a86a;
  --enm-gold-tint:     #f3ecdf;
  --enm-gold-veil:     rgba(176, 137, 79, 0.12);

  /* --- Status ------------------------------------------------------------- */
  --enm-verified:      #2f6f52;
  --enm-verified-tint: #e6f0ea;
  --enm-live:          #c2413a;
  --enm-live-tint:     #fbeceb;
  --enm-new:           #2f5f8f;
  --enm-new-tint:      #e8eff6;

  /* --- Typography ---------------------------------------------------------- */
  --enm-font-display: "Cormorant Garamond", "Times New Roman", Georgia, serif;
  --enm-font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --enm-fs-2xs:  0.6875rem;  /* 11px : eyebrow, meta */
  --enm-fs-xs:   0.75rem;    /* 12px */
  --enm-fs-sm:   0.8125rem;  /* 13px : card meta */
  --enm-fs-base: 0.9375rem;  /* 15px : body */
  --enm-fs-md:   1.0625rem;  /* 17px */
  --enm-fs-lg:   1.25rem;    /* 20px */
  --enm-fs-xl:   1.625rem;   /* 26px */
  --enm-fs-2xl:  2.125rem;   /* 34px */
  --enm-fs-3xl:  2.75rem;    /* 44px */
  --enm-fs-4xl:  3.75rem;    /* 60px : hero */

  --enm-lh-tight: 1.12;
  --enm-lh-snug:  1.32;
  --enm-lh-body:  1.68;

  --enm-track-caps: 0.14em;
  --enm-track-wide: 0.04em;

  /* --- Space scale --------------------------------------------------------- */
  --enm-s-1:  0.25rem;
  --enm-s-2:  0.5rem;
  --enm-s-3:  0.75rem;
  --enm-s-4:  1rem;
  --enm-s-5:  1.5rem;
  --enm-s-6:  2rem;
  --enm-s-7:  3rem;
  --enm-s-8:  4rem;
  --enm-s-9:  6rem;
  --enm-s-10: 8rem;

  /* --- Radius -------------------------------------------------------------- */
  --enm-r-xs:   4px;
  --enm-r-sm:   8px;
  --enm-r:      12px;
  --enm-r-lg:   18px;
  --enm-r-xl:   26px;
  --enm-r-pill: 999px;

  /* --- Elevation ----------------------------------------------------------
     Two-layer shadows: a tight contact shadow plus a wide ambient one. */
  --enm-e-1: 0 1px 2px rgba(23, 20, 15, 0.05),
             0 1px 3px rgba(23, 20, 15, 0.04);
  --enm-e-2: 0 2px 4px rgba(23, 20, 15, 0.05),
             0 6px 16px rgba(23, 20, 15, 0.06);
  --enm-e-3: 0 4px 8px rgba(23, 20, 15, 0.06),
             0 16px 36px rgba(23, 20, 15, 0.09);
  --enm-e-4: 0 8px 16px rgba(23, 20, 15, 0.07),
             0 32px 64px rgba(23, 20, 15, 0.12);

  /* --- Motion -------------------------------------------------------------- */
  --enm-ease:      cubic-bezier(0.22, 0.61, 0.36, 1);
  --enm-ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --enm-dur-fast:  140ms;
  --enm-dur:       260ms;
  --enm-dur-slow:  480ms;

  /* --- Layout -------------------------------------------------------------- */
  --enm-wrap:       1280px;
  --enm-wrap-wide:  1560px;
  --enm-wrap-text:  78ch;
  --enm-gutter:     1rem;

  /* --- Card grid ----------------------------------------------------------
     Column count is the one knob the whole directory hangs off.
     Two on phones, five on desktop, with sensible steps between. */
  --enm-grid-cols: 2;
  --enm-grid-gap:  0.75rem;

  /* Portrait source images are 800x1200, so cards hold a true 2:3 frame. */
  --enm-card-ratio: 2 / 3;
}

@media (min-width: 600px) {
  :root { --enm-grid-cols: 3; --enm-grid-gap: 1rem; --enm-gutter: 1.5rem; }
}
@media (min-width: 900px) {
  :root { --enm-grid-cols: 4; --enm-grid-gap: 1.25rem; --enm-gutter: 2rem; }
}
@media (min-width: 1200px) {
  :root { --enm-grid-cols: 5; --enm-grid-gap: 1.5rem; --enm-gutter: 2.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  :root { --enm-dur-fast: 0ms; --enm-dur: 0ms; --enm-dur-slow: 0ms; }
}