/* ============================================================
   Nalanbi design tokens — "Clear Water".
   GENERATED by scripts/build-tokens.mjs from design/tokens.json; edit
   the JSON, not this file. Every other stylesheet reads from
   these custom properties; no raw hex values elsewhere.
   ============================================================ */

@font-face {
  font-family: "Outfit";
  src: url("/assets/fonts/Outfit-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Outfit";
  src: url("/assets/fonts/Outfit-Medium.ttf") format("truetype");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Outfit";
  src: url("/assets/fonts/Outfit-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Outfit";
  src: url("/assets/fonts/Outfit-Bold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}

:root {
  /* ---- brand ---------------------------------------------------- */
  --ocean: #1F527F;             /* structure, links, focus */
  --ocean-deep: #173D5F;        /* dark bands, emphasis headings */
  --turquoise: #2E8F91;         /* primary action */
  --turquoise-ink: #217B7D;     /* AA-safe turquoise for prices on white */

  /* ---- surfaces ------------------------------------------------- */
  --white: #FFFFFF;
  --seafoam: #DCEBE8;
  --seafoam-tint: #F1F6F5;
  --price-band: #EAF3F1;        /* price header of the /properties map carousel card */
  --price-band-line: #D6E6E2;   /* rule under price-band */
  --sand: #E4DCCA;
  --sand-dark: #A8967E;
  --sand-ink: #5B4B30;          /* text on sand (Draft pill) */

  /* ---- text & lines --------------------------------------------- */
  --charcoal: #252B2C;
  --slate: #5C6B6E;             /* secondary text, AA on white */
  --stone: #726A5C;             /* muted text, AA on white */
  --hairline: #E1E8E6;
  --hairline-strong: #D2D9D5;
  --hairline-dashed: #B9C6C2;   /* dashed "add this" prompts */
  --on-dark: #FFFFFF;
  --on-dark-muted: #B7DED6;
  --count-bg: #DCE5E3;          /* idle count badge (complex details rent / sale tabs) */
  --count-ink: #3F4C4E;         /* text on count-bg */

  /* ---- listing category ----------------------------------------- */
  --rental: #3F9991;
  --rental-bg: #E1F1EE;
  --rental-ink: #256E6A;
  --rental-on-dark: #CFEAE4;    /* muted text on a rental-ink band (listing manager bar) */
  --sale: #D4A53A;
  --sale-bg: #FFF4D8;
  --sale-ink: #7A5A12;

  /* ---- semantic status ------------------------------------------ */
  --negative: #B95243;
  --negative-bg: #FBEAE7;
  --negative-ink: #A23A2D;

  /* ---- loading shimmer ------------------------------------------ */
  --shimmer-base: #E1E8E6;
  --shimmer-highlight: #F4F8F7;

  /* ---- translucent derivatives of the palette ------------------- */
  --focus-ring: rgba(31, 82, 127, .55); /* ocean */
  --focus-halo: rgba(31, 82, 127, .16); /* ocean */
  --header-glass: rgba(255, 255, 255, .92); /* white */
  --scrim: linear-gradient(180deg, rgba(23, 61, 95, 0) 35%, rgba(23, 61, 95, .78) 100%); /* photo caption fade */
  --on-dark-line: rgba(220, 235, 232, .38); /* seafoam */
  --backdrop: rgba(23, 61, 95, .55); /* ocean-deep, behind modals */

  /* ---- record status (StatusColors) ----------------------------- */
  --paid: #4C8C5C;              /* sage: paid/occupied/active */
  --pending: #D9A63A;           /* muted amber: pending/ending soon */
  --pending-bg: #FFF3D6;
  --info: #657CE8;              /* blue: informational, not urgent */
  --info-bg: #EEF1FF;
  --info-ink: #3F55B8;          /* text on info-bg (workspace pills, funnel dots) */
  --deal-under-contract: #7C6FCB; /* violet: under contract / scheduled showing */
  --deal-under-contract-bg: #EFEDFA;
  --deal-under-contract-ink: #5A4DAA; /* violet text/icons on deal-under-contract-bg */

  /* ---- depth (ocean-deep tinted) -------------------------------- */
  --shadow-soft: 0 4px 12px rgba(23, 61, 95, .07);
  --shadow-med: 0 6px 16px rgba(23, 61, 95, .1);
  --shadow-lift: 0 16px 36px rgba(23, 61, 95, .16);
  --shadow-chip: 0 4px 12px rgba(23, 61, 95, .14);
  --shadow-chip-sm: 0 2px 8px rgba(23, 61, 95, .18);
  --shadow-tab: 0 2px 6px rgba(23, 61, 95, .12); /* selected segment of a segmented control */
  --shadow-dialog: 0 24px 64px rgba(23, 61, 95, .28); /* listing details panel */

  /* ---- type scale (≈1.25 ratio, 16px base) ---------------------- */
  --font-sans: "Outfit", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs-xs: .8125rem;            /* 13 — meta, fine print */
  --fs-sm: .9375rem;            /* 15 — secondary body, controls */
  --fs-md: 1.0625rem;           /* 17 — lead body */
  --fs-lg: 1.25rem;             /* 20 — card price, small headings */
  --fs-xl: 1.5rem;              /* 24 — h3 */
  --fs-2xl: clamp(1.75rem, 1.2rem + 1.6vw, 2.25rem); /* 28→36 — h2 */
  --fs-display: clamp(2.25rem, 1.3rem + 3.6vw, 3.75rem); /* 36→60 — h1 */
  --fs-2xs: .75rem;             /* 12 — dense captions, table meta, card chips */
  --fs-ui: .875rem;             /* 14 — dense body, controls, card text */
  --fs-card-title: 1.125rem;    /* 18 — listing card title */
  --lh-tight: 1.08;
  --lh-snug: 1.25;
  --lh-body: 1.55;

  /* ---- spacing (4px grid) --------------------------------------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --section-y: clamp(var(--sp-8), 8vw, var(--sp-9));
  --gutter: var(--sp-5);

  /* ---- shape ---------------------------------------------------- */
  --r-sm: 8px;
  --r-control: 10px;
  --r-md: 12px;
  --r-tile: 14px;
  --r-lg: 16px;
  --r-photo: 18px;
  --r-card: 20px;
  --r-sheet: 24px;
  --r-pill: 999px;
  --r-arch: var(--r-pill) var(--r-pill) var(--r-photo) var(--r-photo);

  /* ---- layout --------------------------------------------------- */
  --wrap: 1200px;
  --header-h: 68px;

  /* ---- motion --------------------------------------------------- */
  --ease: cubic-bezier(.16, 1, .3, 1);
  --dur-fast: .16s;
  --dur-med: .32s;
  --dur-slow: .9s;
}

@media (max-width: 520px) {
  :root { --gutter: var(--sp-4); --header-h: 60px; }
}