/* ==========================================================================
   Anchora Apartments — Design Tokens
   ========================================================================== */

:root {
  /* ---- Color: Warm whites (rustic-lux primary) ---- */
  --color-ivory:        #FAF7F2;
  --color-cream:        #F5EFE5;
  --color-bone:         #ECE3D2;
  --color-stone:        #D6CBB8;
  --color-line:         #E6DCC9;
  --color-line-soft:    #EFE7D7;

  /* ---- Color: Text ---- */
  --color-ink:          #1F1B16;
  --color-ink-soft:     #3A332B;
  --color-muted:        #7A7065;
  --color-muted-light:  #A29789;

  /* ---- Color: Turquoise accent (secondary) ---- */
  --color-aqua:         #1F8C8C;
  --color-aqua-deep:    #145E60;
  --color-aqua-soft:    #4FA8A8;
  --color-aqua-mist:    #E5F1F0;

  /* ---- Color: Brass / warm metallic (tertiary detail) ---- */
  --color-brass:        #B08A4F;
  --color-brass-deep:   #846332;

  /* ---- Color: Functional ---- */
  --color-success:      #5A8A5C;
  --color-error:        #B0463A;
  --color-shade:        rgba(31, 27, 22, 0.06);
  --color-shade-strong: rgba(31, 27, 22, 0.16);

  /* ---- Typography stacks ---- */
  --font-display: "Cormorant Garamond", "Cormorant", "Playfair Display", Georgia, "Times New Roman", serif;
  --font-accent:  "Marcellus", "Cormorant Garamond", Georgia, serif;
  --font-body:    "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ---- Type scale (clamp for fluid sizing) ---- */
  --fs-xs:    0.75rem;     /* 12 */
  --fs-sm:    0.875rem;    /* 14 */
  --fs-base:  1rem;        /* 16 */
  --fs-md:    1.125rem;    /* 18 */
  --fs-lg:    1.25rem;     /* 20 */
  --fs-xl:    1.5rem;      /* 24 */
  --fs-2xl:   clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);
  --fs-3xl:   clamp(2.25rem, 1.7rem + 2.4vw, 3.5rem);
  --fs-4xl:   clamp(3rem,    2.1rem + 3.8vw, 5rem);
  --fs-display:clamp(3.75rem, 2.4rem + 5.6vw, 7.5rem);

  /* ---- Spacing 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;
  --space-32: 8rem;
  --space-40: 10rem;

  /* ---- Layout ---- */
  --container:        1360px;
  --container-narrow: 960px;
  --container-wide:   1600px;
  --gutter:           clamp(1.25rem, 0.6rem + 2.4vw, 2.5rem);

  /* ---- Radii ---- */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* ---- Shadows (warm-tinted, not pure black) ---- */
  --shadow-soft:    0 18px 40px -22px rgba(31, 27, 22, 0.18);
  --shadow-card:    0 24px 48px -28px rgba(31, 27, 22, 0.22);
  --shadow-deep:    0 40px 80px -40px rgba(31, 27, 22, 0.30);
  --shadow-inset:   inset 0 1px 0 rgba(255, 250, 240, 0.6);

  /* ---- Easing & motion ---- */
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:    cubic-bezier(0.45, 0, 0.55, 1);
  --dur-fast:       180ms;
  --dur-base:       320ms;
  --dur-slow:       640ms;
  --dur-glacial:    1200ms;

  /* ---- Z-index system ---- */
  --z-base:      1;
  --z-elevated:  10;
  --z-sticky:    50;
  --z-overlay:   100;
  --z-modal:     200;
  --z-toast:     300;
}

/* Honor reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
    --dur-glacial: 0ms;
  }
}