/* ==========================================================================
   Esentai City — Design Tokens
   Single source of truth for color, typography, spacing, motion.
   Derived from /DESIGN.md.
   ========================================================================== */

:root {
  /* ----- Color: Surfaces ----- */
  --color-canvas:        #F5F2EC;          /* warm off-white background */
  --color-surface:       #FCFAF6;          /* card and container fill */
  --color-surface-warm:  rgba(168, 130, 90, 0.08);  /* clinker tint wash */

  /* ----- Color: Text ----- */
  --color-ink:           #1C1B17;          /* primary text — warm near-black, NEVER #000 */
  --color-ink-muted:     #7A766C;          /* secondary text, captions, metadata */
  --color-ink-soft:      rgba(28, 27, 23, 0.65); /* tertiary, hover-rest */

  /* ----- Color: Accent ----- */
  --color-brass:         #A8825A;          /* single accent — CTAs, focus, key numbers */
  --color-brass-hover:   #8E6D49;          /* derived darker brass — hover only */
  --color-brass-soft:    rgba(168, 130, 90, 0.15);  /* focus ring, soft fills */
  --color-clinker:       #8B5A3C;          /* error / clinker reference — sparingly */

  /* ----- Color: Lines ----- */
  --color-border:        rgba(120, 110, 90, 0.14);  /* whisper border */
  --color-border-strong: rgba(120, 110, 90, 0.28);  /* dividers, emphasis */

  /* ----- Color: State ----- */
  --color-error:         #8B5A3C;          /* clinker tone for errors */
  --color-success:       #5A7A52;          /* mossy green, low-saturation */

  /* ----- Typography: Families ----- */
  --font-display: 'Fraunces', 'Times New Roman', serif;
  --font-body:    'Geist', system-ui, -apple-system, sans-serif;
  --font-mono:    'Geist Mono', ui-monospace, 'SFMono-Regular', monospace;

  /* ----- Typography: Scale (fluid via clamp) ----- */
  --text-display-xl: clamp(3.5rem, 7vw, 6rem);
  --text-display-lg: clamp(2.5rem, 5vw, 4rem);
  --text-display-md: clamp(1.75rem, 3vw, 2.5rem);
  --text-title:      clamp(1.25rem, 1.6vw, 1.5rem);
  --text-body-lg:    1.125rem;
  --text-body:       1rem;
  --text-caption:    0.875rem;
  --text-micro:      0.75rem;

  /* ----- Typography: Weight ----- */
  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* ----- Typography: Tracking ----- */
  --tracking-tight:   -0.02em;
  --tracking-snug:    -0.005em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-uppercase: 0.12em;

  /* ----- Typography: Leading ----- */
  --leading-display: 1.05;
  --leading-tight:   1.2;
  --leading-body:    1.55;
  --leading-caption: 1.45;

  /* ----- Spacing scale ----- */
  --space-1:  0.25rem;   /* 4px  */
  --space-2:  0.5rem;    /* 8px  */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.25rem;   /* 20px */
  --space-6:  1.5rem;    /* 24px */
  --space-7:  1.75rem;   /* 28px */
  --space-8:  2rem;      /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */
  --space-20: 5rem;      /* 80px */
  --space-24: 6rem;      /* 96px */

  /* ----- Section gap (fluid) ----- */
  --section-gap: clamp(4rem, 10vw, 8rem);
  --section-gap-mobile: clamp(3rem, 8vw, 5rem);

  /* ----- Container ----- */
  --container-max: 1400px;
  --container-pad: clamp(1.25rem, 4vw, 3rem);

  /* ----- Radii ----- */
  --radius-sm:    0.375rem;  /* 6px  */
  --radius-md:    0.625rem;  /* 10px — inputs */
  --radius-lg:    1.25rem;   /* 20px — cards */
  --radius-xl:    1.75rem;   /* 28px — feature cards */
  --radius-pill:  999px;     /* buttons */

  /* ----- Shadow (used VERY sparingly — atmosphere is shadow-light) ----- */
  --shadow-none: none;
  --shadow-card-rest:  0 0 0 1px var(--color-border);
  --shadow-card-hover: 0 12px 32px -16px rgba(28, 27, 23, 0.18);
  --shadow-focus:      0 0 0 3px var(--color-brass-soft);

  /* ----- Motion: easing ----- */
  --ease-out-quint:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out-quint: cubic-bezier(0.83, 0, 0.17, 1);

  /* ----- Motion: duration ----- */
  --dur-micro:    180ms;
  --dur-standard: 320ms;
  --dur-reveal:   640ms;
  --dur-perpetual: 2000ms;

  /* ----- Z-index ----- */
  --z-header:    50;
  --z-overlay:   90;
  --z-modal:     100;
  --z-tooltip:   110;
}

/* ==========================================================================
   Reduced-motion override — required by DESIGN.md
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-micro:    0ms;
    --dur-standard: 0ms;
    --dur-reveal:   0ms;
    --dur-perpetual: 0ms;
  }
}

/* ==========================================================================
   Dark surface override is intentionally NOT defined.
   The brand is daylit. Adding a dark mode would dilute the architectural premise.
   ========================================================================== */