/* ==========================================================================
   Iron Acre — Design Tokens
   Variables only. No selectors other than :root should live in this file.

   Breakpoints used across the stylesheets (CSS has no native custom media,
   so these are documented here and hardcoded in the media queries):
     360px  small phone
     600px  large phone / small tablet
     900px  nav collapses to hamburger below this
     1200px desktop
   ========================================================================== */

:root {
  /* ---------------------------------------------------------------------
     Color
     --------------------------------------------------------------------- */
  --c-void: #070906;          /* page background, near-black */
  --c-surface: #0f130e;       /* cards, elevated panels */
  --c-surface-2: #171c15;     /* charcoal, hover states */
  --c-surface-3: #1f261d;     /* charcoal, pressed / borders on dark cards */

  --c-forest: #0e2b18;        /* deep forest green */
  --c-forest-lt: #17402a;     /* ADJUSTABLE: lighter forest, gradient partner to --c-forest */

  /* TODO: confirm — sample the exact accent from the real Iron Acre logo. */
  --c-lime: #9fe870;
  --c-lime-dim: #7dc24f;
  --c-lime-deep: #4f8a2e;     /* for text on light surfaces, meets contrast */
  --c-lime-soft: rgba(159, 232, 112, 0.14);
  --c-lime-glow: rgba(159, 232, 112, 0.35);

  --c-text: #f4f6f1;          /* off-white, primary */
  --c-text-mute: #a8b0a2;     /* secondary copy */
  --c-text-faint: #7c8478;    /* captions, meta — lightened to clear 4.5:1 on --c-surface */

  --c-border: rgba(244, 246, 241, 0.1);
  --c-border-strong: rgba(244, 246, 241, 0.22);
  --c-scrim: rgba(7, 9, 6, 0.72);

  --c-focus: var(--c-lime);

  /* ---------------------------------------------------------------------
     Typography
     Currently a system stack so the site ships with zero font requests.
     To adopt a self-hosted display face later, add the @font-face rule in
     base.css and change --font-display here only.
     --------------------------------------------------------------------- */
  --font-display: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;

  /* Fluid scale — headings resize continuously, no breakpoint jumps. */
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --fs-lg: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  --fs-xl: clamp(1.1875rem, 1.1rem + 0.4vw, 1.375rem);
  --fs-2xl: clamp(1.375rem, 1.25rem + 0.7vw, 1.875rem);
  --fs-3xl: clamp(1.75rem, 1.45rem + 1.5vw, 2.625rem);
  --fs-4xl: clamp(2.125rem, 1.6rem + 2.6vw, 3.5rem);
  /* Min sized so the longest hero line still fits inside a 375px viewport. */
  --fs-hero: clamp(2.125rem, 1.3rem + 4.4vw, 5.25rem);

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 800;

  --lh-tight: 0.98;
  --lh-snug: 1.15;
  --lh-normal: 1.5;
  --lh-relaxed: 1.65;

  --ls-tight: -0.02em;
  --ls-normal: 0;
  --ls-wide: 0.06em;
  --ls-wider: 0.16em;   /* eyebrows, small caps labels */

  /* ---------------------------------------------------------------------
     Spacing — 4px base scale
     --------------------------------------------------------------------- */
  --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;

  /* Vertical rhythm between major page sections. */
  --section-y: clamp(4rem, 2.5rem + 6vw, 8rem);

  /* ---------------------------------------------------------------------
     Layout
     --------------------------------------------------------------------- */
  --container: 1200px;
  --container-wide: 1440px;
  --container-narrow: 760px;
  --gutter: clamp(1.25rem, 0.9rem + 1.6vw, 2.5rem);
  --header-h: 72px;
  --header-h-lg: 88px;

  /* ---------------------------------------------------------------------
     Borders and radii
     --------------------------------------------------------------------- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 18px;
  --radius-xl: 26px;
  --radius-pill: 999px;
  --border-hairline: 1px solid var(--c-border);

  /* ---------------------------------------------------------------------
     Elevation
     --------------------------------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.55);
  --shadow-lime: 0 8px 30px rgba(159, 232, 112, 0.22);

  /* ---------------------------------------------------------------------
     Motion — restrained by design
     --------------------------------------------------------------------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 180ms;
  --dur-base: 320ms;
  --dur-slow: 700ms;
  /* Lighting simulator crossfade. This is the single source of truth for the
     duration: js/lighting-simulator.js reads this token at startup rather than
     hardcoding a matching number. Change it here only. */
  --dur-cross: 560ms;
  /* Half of the veil's round trip in the simulator's scene change: the dip
     down, then the lift back up. Long enough to soften the handoff between
     the two photographed homes without making the controls feel sluggish. */
  --dur-scene: 360ms;
  /* Pointer-driven depth settle. Slower than the pointer so the scene glides
     rather than tracking it exactly. */
  --dur-depth: 520ms;

  /* ---------------------------------------------------------------------
     Z-index scale
     --------------------------------------------------------------------- */
  --z-base: 1;
  --z-sticky: 100;
  --z-header: 200;
  --z-drawer: 300;
  --z-modal: 400;
  --z-skip: 500;
}