/* White House Residences — design tokens.
   Ported verbatim from the design system. 187 custom properties:
   base values plus semantic aliases. Reach for the aliases first.
   Source: _ds/white-house-residences-…/tokens/*.css  (fonts.css is
   replaced by self-hosted binaries in assets/fonts/fonts.css). */

/* ── Colour ────────────────────────────────────────────────────────────────
   Two brand colours, taken straight out of the logo artwork:
   forest green #114326 and champagne gold #E0C07B. Everything else is a
   warm neutral built to sit under them. */
:root {
  /* Forest green — the badge field, dark surfaces, primary ink on gold */
  --green-950: #06180C;
  --green-900: #0B2117;
  --green-800: #0D3320;
  --green-700: #114326; /* BRAND GREEN — from logo artwork */
  --green-600: #1A5A34;
  --green-500: #24743F;
  --green-200: #C7DACD;
  --green-100: #E4EDE6;
  --green-50:  #F2F7F3;

  /* Champagne gold — the mark, the accent, the hairline that says five star */
  --gold-800: #8C6A2E;
  --gold-700: #A8813F;
  --gold-600: #C9A55F;
  --gold-500: #E0C07B; /* BRAND GOLD — from logo artwork */
  --gold-400: #EAD29A;
  --gold-300: #F0DFB8;
  --gold-200: #F3E5C6;
  --gold-100: #F9F1DE;

  /* Warm paper neutrals — the cream section band is inherited from the source site */
  --ivory:     #FDFBF6;
  --cream-100: #F5EFE3;
  --cream-200: #F0E7D7;
  --sand-300:  #E2D6BF;

  /* Ink — warm charcoal body text, inherited from the source site (#323232) */
  --ink-900: #1F241F;
  --ink-800: #323232;
  --ink-600: #7F7D7D;
  --ink-400: #C6C6C6;
  --ink-200: #E4E4E4;
  --ink-100: #EDEDED;
  --ink-50:  #F2F3F5;
  --white:   #FFFFFF;
  --black:   #000000;

  /* Alpha ink / alpha white — the source expresses nearly every border and
     secondary text colour as an alpha of ink or white. Keep them as tokens. */
  --ink-a80: rgba(50, 50, 50, 0.8);
  --ink-a70: rgba(50, 50, 50, 0.7);
  --ink-a60: rgba(50, 50, 50, 0.6);
  --ink-a20: rgba(50, 50, 50, 0.2);
  --ink-a10: rgba(50, 50, 50, 0.1);
  --ink-a05: rgba(50, 50, 50, 0.05);
  --white-a85: rgba(255, 255, 255, 0.85);
  --white-a60: rgba(255, 255, 255, 0.6);
  --white-a40: rgba(255, 255, 255, 0.4);
  --white-a30: rgba(255, 255, 255, 0.3);
  --white-a20: rgba(255, 255, 255, 0.2);
  --white-a10: rgba(255, 255, 255, 0.1);

  /* Semantic status — literal values inherited from the source palette */
  --success: #65BC7B;
  --success-strong: #20B038;
  --whatsapp: #20B038;
  --whatsapp-light: #60D66A;
  --danger: #DD6363;
  --danger-strong: #CF2E2E;
  --warning: #FCB900;
  --info: #0693E3;

  /* ── Semantic aliases — reach for these first ── */
  --text-heading: var(--green-700);
  --text-body: var(--ink-800);
  --text-muted: var(--ink-a70);
  --text-subtle: var(--ink-600);
  --text-accent: var(--gold-700);
  --text-accent-on-dark: var(--gold-500);
  --text-on-dark: var(--white);
  --text-on-dark-muted: var(--white-a60);

  --surface-page: var(--white);
  --surface-card: var(--white);
  --surface-warm: var(--cream-200);
  --surface-warm-soft: var(--cream-100);
  --surface-dark: var(--green-900);
  --surface-deep: var(--green-950);
  --surface-brand: var(--green-700);
  --surface-glass: rgba(255, 255, 255, 0.1);
  --surface-scrim: rgba(6, 24, 12, 0.45);

  --border-hairline: var(--ink-a10);
  --border-subtle: var(--ink-a05);
  --border-strong: var(--ink-800);
  --border-on-dark: var(--white-a20);
  --border-accent: var(--gold-500);
  --border-accent-soft: rgba(224, 192, 123, 0.3);

  --accent: var(--gold-500);
  --accent-hover: var(--gold-600);
  --accent-soft: var(--gold-100);
  --focus-ring: var(--gold-600);
  --selection-bg: rgba(224, 192, 123, 0.3);
}
/* ── Type ──────────────────────────────────────────────────────────────────
   Two families. Cormorant Garamond sets every heading, price and pull quote;
   Poppins carries body copy, navigation, buttons and the wordmark lockup.
   The uppercase-tracked micro label is the brand's signature type gesture. */
:root {
  --font-display: "Cormorant Garamond", ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  --font-sans: "Poppins", "Helvetica Neue", Helvetica, sans-serif;
  --font-brand: var(--font-sans); /* wordmark / badge lockup: 800, uppercase, tracked */

  --text-nano: 0.625rem;  /* 10px — mobile nav links, scroll cue */
  --text-xs: 0.75rem;     /* 12px — eyebrows, buttons, micro labels */
  --text-sm: 0.875rem;    /* 14px — captions, list copy, footer links */
  --text-base: 1rem;
  --text-body: 1.05rem;   /* 16.8px — the site's body size, from source */
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
  --text-5xl: 3rem;
  --text-6xl: 3.75rem;
  --text-7xl: 4.5rem;

  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-black: 800;

  --leading-none: 1;
  --leading-tight: 1.1;
  --leading-snug: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;

  --tracking-tight: -0.01em;
  --tracking-normal: 0;
  --tracking-nav: 0.1em;      /* nav links, uppercase serif card titles */
  --tracking-label: 0.15em;   /* buttons, micro labels */
  --tracking-eyebrow: 0.2em;  /* section eyebrows, footer column heads */
  --tracking-brand: 0.28em;   /* "RESIDENCES BY PEBBLES" descender line */

  /* Composite roles */
  --display-1: var(--weight-light) var(--text-7xl) / var(--leading-tight) var(--font-display);
  --display-2: var(--weight-light) var(--text-5xl) / var(--leading-tight) var(--font-display);
  --heading-1: var(--weight-regular) var(--text-4xl) / var(--leading-snug) var(--font-display);
  --heading-2: var(--weight-regular) var(--text-2xl) / var(--leading-snug) var(--font-display);
  --heading-3: var(--weight-regular) var(--text-xl) / var(--leading-snug) var(--font-display);
  --body: var(--weight-light) var(--text-body) / var(--leading-relaxed) var(--font-sans);
  --body-sm: var(--weight-light) var(--text-sm) / var(--leading-relaxed) var(--font-sans);
  --label: var(--weight-medium) var(--text-xs) / var(--leading-normal) var(--font-sans);
}
/* ── Space & layout ───────────────────────────────────────────────────────
   A 4px base scale. Sections breathe: 96px on mobile, 160px on desktop. */
:root {
  --space-0: 0;
  --space-1: 0.25rem;  /* 4 */
  --space-1-5: 0.375rem; /* 6 — the accent bullet offset */
  --space-2: 0.5rem;   /* 8 */
  --space-3: 0.75rem;  /* 12 */
  --space-4: 1rem;     /* 16 */
  --space-5: 1.25rem;  /* 20 */
  --space-6: 1.5rem;   /* 24 — page gutter, card gap */
  --space-8: 2rem;     /* 32 — card padding */
  --space-10: 2.5rem;  /* 40 */
  --space-12: 3rem;    /* 48 */
  --space-16: 4rem;    /* 64 — heading → grid */
  --space-20: 5rem;    /* 80 */
  --space-24: 6rem;    /* 96 — section padding, mobile */
  --space-32: 8rem;    /* 128 */
  --space-40: 10rem;   /* 160 — section padding, desktop */

  --container-max: 80rem;    /* 1280px — max-w-7xl */
  --container-narrow: 48rem; /* 768px — prose measure */
  --gutter: var(--space-6);
  --gutter-lg: var(--space-12);
  --section-y: var(--space-24);
  --section-y-lg: var(--space-40);
  --grid-gap: var(--space-8);

  --nav-height: 88px;
  --nav-height-scrolled: 72px;
  --badge-size: 132px;         /* hanging badge, desktop */
  --badge-size-sm: 88px;       /* hanging badge, mobile */
  --badge-overhang: 46px;      /* how far the badge drops below the bar */
  --icon-chip: 40px;           /* amenity icon circle */
  --tap-min: 44px;
}
/* ── Radius, borders, elevation ───────────────────────────────────────────
   Two shapes carry the brand: the full pill (every button, every chip) and
   the 16px card. Shadow is used sparingly — hairlines do most of the work. */
:root {
  --radius-sm: 0.5rem;   /* 8 */
  --radius-md: 0.75rem;  /* 12 — gallery tile */
  --radius-lg: 1rem;     /* 16 — the card radius */
  --radius-xl: 1.5rem;   /* 24 */
  --radius-badge: 24%;   /* squircle of the logo badge */
  --radius-pill: 9999px;

  --border-hairline-width: 1px;
  --rule-width: 1px;
  --rule-length: 3rem;   /* the 48px hairline that precedes a kicker */

  --shadow-none: none;
  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 1px 3px 0 rgba(31, 36, 31, 0.06), 0 1px 2px -1px rgba(31, 36, 31, 0.06);
  --shadow-card: 0 10px 30px -18px rgba(11, 33, 23, 0.25);
  --shadow-raised: 0 8px 30px rgba(6, 24, 12, 0.2);
  --shadow-badge: 0 18px 40px rgba(6, 24, 12, 0.35);
  --shadow-overlay: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  --shadow-bar-up: 0 -10px 40px rgba(0, 0, 0, 0.1);

  --blur-glass: 12px; /* @kind other */    /* scrolled nav, glass button */
  --blur-veil: 4px; /* @kind other */      /* lightbox backdrop */

  /* Protection gradient — laid under type on full-bleed photography */
  --scrim-bottom: linear-gradient(to top, rgba(6, 24, 12, 0.78) 0%, rgba(6, 24, 12, 0.35) 38%, rgba(6, 24, 12, 0) 72%); /* @kind color */
  --scrim-top: linear-gradient(to bottom, rgba(6, 24, 12, 0.55) 0%, rgba(6, 24, 12, 0) 45%); /* @kind color */
  --scrim-flat: rgba(6, 24, 12, 0.45); /* @kind color */
  --hover-veil: rgba(0, 0, 0, 0.2); /* @kind color */
}
/* ── Motion ───────────────────────────────────────────────────────────────
   Slow, unhurried, always ease-out. Nothing bounces. Sections rise a little
   and fade in once; images scale 1.05 over 700ms on hover; colour changes
   take 300ms. Reveal happens a single time — never on scroll-back. */
:root {
  --dur-fast: 150ms; /* @kind other */
  --dur-base: 300ms; /* @kind other */   /* colour + opacity */
  --dur-slow: 500ms; /* @kind other */   /* nav state change */
  --dur-image: 700ms; /* @kind other */  /* image scale on hover */
  --dur-reveal: 800ms; /* @kind other */ /* section reveal */
  --dur-hero: 1000ms; /* @kind other */  /* hero entrance */

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --ease-linear: linear; /* @kind other */

  --reveal-y: 20px;       /* cards */
  --reveal-y-lg: 40px;    /* section text blocks */
  --reveal-scale: 0.95; /* @kind other */   /* images */
  --stagger: 100ms; /* @kind other */

  --hover-lift: none; /* @kind other */          /* the brand does not lift cards */
  --hover-image-scale: 1.05; /* @kind other */
  --press-scale: 0.98; /* @kind other */
}