/* Dream Home — design tokens.
   Hand-transcribed from design-system/tokens.json (source of truth). Keep both in sync.
   Laravel: move to resources/css/tokens.css (imported by Vite). */

/* ---------- Fonts ---------- */
@font-face { font-family: "Alexandria"; src: url("../fonts/Alexandria-Variable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans Arabic"; src: url("../fonts/IBMPlexSansArabic-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans Arabic"; src: url("../fonts/IBMPlexSansArabic-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans Arabic"; src: url("../fonts/IBMPlexSansArabic-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans Arabic"; src: url("../fonts/IBMPlexSansArabic-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

/* ---------- Light theme (default) ---------- */
:root {
  color-scheme: light;
  --surface: #f8f5ef;
  --surface-raised: #ffffff;
  --surface-sunken: #f0eadf;
  --line: #e3dbcd;
  --line-strong: #857b69;
  --ink: #161b33;
  --ink-muted: #565b70;
  --ink-subtle: #64687d;
  --brand: #283c90;
  --brand-strong: #1d2d74;
  --brand-deep: #141d52;
  --brand-soft: #e5e9f7;
  --on-brand: #ffffff;
  --on-deep: #ffffff;
  --on-deep-muted: #c3cbef;
  --sand: #d8b57c;
  --on-sand: #161b33;
  --sand-ink: #7a5217;
  --sand-soft: #f6ecda;
  --available: #1b6a44;
  --available-soft: #e2f1e8;
  --reserved: #8a4f00;
  --reserved-soft: #fbeedb;
  --sold: #a3261b;
  --sold-soft: #f9e4e1;
  --focus: #283c90;
  --scrim: rgba(13, 18, 48, 0.62);
  --link: var(--brand);

  --shadow-sm: 0 1px 2px #161b330f, 0 1px 3px #161b3314;
  --shadow-md: 0 6px 16px -4px #161b331f, 0 2px 4px #161b330f;
  --shadow-lg: 0 18px 40px -8px #141d5233;
  --focus-ring: 0 0 0 2px #f8f5ef, 0 0 0 4px #283c90;

  /* Type families */
  --font-display: "Alexandria", "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif;
  --font-text: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, system-ui, sans-serif;

  /* Spacing (4px base) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* Radius */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-roof: 40px;
  --radius-full: 9999px;

  /* Sizes */
  --control-sm: 36px;
  --control-md: 44px;
  --control-lg: 52px;
  --content-max: 1200px;

  /* Site-level (not in tokens.json): header height and section rhythm */
  --header-h: 76px;
  --section-gap: var(--space-9);
  --gutter: var(--space-5);
}

/* ---------- Dark theme ---------- */
:root[data-theme="dark"] {
  color-scheme: dark;
  --surface: #0d1230;
  --surface-raised: #161c42;
  --surface-sunken: #090d26;
  --line: #283063;
  --line-strong: #7a83b8;
  --ink: #f3efe7;
  --ink-muted: #a9afc9;
  --ink-subtle: #8d93b1;
  --brand: #8fa3f2;
  --brand-strong: #b3c1f8;
  --brand-deep: #1c2660;
  --brand-soft: #1f2b6b;
  --on-brand: #0d1230;
  --on-deep: #f3efe7;
  --on-deep-muted: #b9c2e8;
  --sand: #c9a46a;
  --on-sand: #161b33;
  --sand-ink: #e4c48f;
  --sand-soft: #2c2413;
  --available: #72d3a1;
  --available-soft: #10301f;
  --reserved: #f3bb6b;
  --reserved-soft: #33230b;
  --sold: #f69b90;
  --sold-soft: #3b1511;
  --focus: #8fa3f2;
  --scrim: rgba(5, 8, 24, 0.7);
  --shadow-sm: 0 1px 3px #000000a6;
  --shadow-md: 0 8px 20px -4px #000000b3;
  --shadow-lg: 0 18px 40px -8px #000000cc;
  --focus-ring: 0 0 0 2px #0d1230, 0 0 0 4px #8fa3f2;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --surface: #0d1230;
    --surface-raised: #161c42;
    --surface-sunken: #090d26;
    --line: #283063;
    --line-strong: #7a83b8;
    --ink: #f3efe7;
    --ink-muted: #a9afc9;
    --ink-subtle: #8d93b1;
    --brand: #8fa3f2;
    --brand-strong: #b3c1f8;
    --brand-deep: #1c2660;
    --brand-soft: #1f2b6b;
    --on-brand: #0d1230;
    --on-deep: #f3efe7;
    --on-deep-muted: #b9c2e8;
    --sand: #c9a46a;
    --on-sand: #161b33;
    --sand-ink: #e4c48f;
    --sand-soft: #2c2413;
    --available: #72d3a1;
    --available-soft: #10301f;
    --reserved: #f3bb6b;
    --reserved-soft: #33230b;
    --sold: #f69b90;
    --sold-soft: #3b1511;
    --focus: #8fa3f2;
    --scrim: rgba(5, 8, 24, 0.7);
    --shadow-sm: 0 1px 3px #000000a6;
    --shadow-md: 0 8px 20px -4px #000000b3;
    --shadow-lg: 0 18px 40px -8px #000000cc;
    --focus-ring: 0 0 0 2px #0d1230, 0 0 0 4px #8fa3f2;
  }
}

@media (max-width: 767px) {
  :root { --header-h: 64px; --section-gap: var(--space-8); --gutter: var(--space-4); }
}

/* ---------- Type styles (tokens.json → type.groups) ----------
   Display sizes scale down on small screens via clamp(); desktop values match the tokens exactly. */
.t-display-xl { font-family: var(--font-display); font-size: clamp(34px, 5.2vw, 56px); line-height: 1.36; font-weight: 600; letter-spacing: -0.01em; }
.t-display-lg { font-family: var(--font-display); font-size: clamp(28px, 3.8vw, 40px); line-height: 1.4; font-weight: 600; }
.t-heading-1 { font-family: var(--font-display); font-size: clamp(24px, 3vw, 32px); line-height: 1.44; font-weight: 600; }
.t-heading-2 { font-family: var(--font-display); font-size: clamp(20px, 2.2vw, 24px); line-height: 1.5; font-weight: 600; }
.t-heading-3 { font-family: var(--font-display); font-size: 19px; line-height: 30px; font-weight: 600; }
.t-figure-lg { font-family: var(--font-display); font-size: clamp(34px, 4vw, 44px); line-height: 52px; font-weight: 700; }
.t-price { font-family: var(--font-display); font-size: 22px; line-height: 30px; font-weight: 700; }
.t-lead { font-size: 18px; line-height: 32px; font-weight: 400; }
.t-body { font-size: 16px; line-height: 28px; font-weight: 400; }
.t-body-sm { font-size: 14px; line-height: 24px; font-weight: 400; }
.t-label { font-size: 15px; line-height: 20px; font-weight: 600; }
.t-eyebrow { font-size: 13px; line-height: 20px; font-weight: 600; letter-spacing: 0.02em; }
.t-caption { font-size: 12px; line-height: 18px; font-weight: 500; }
:lang(ar) .t-eyebrow { letter-spacing: 0; }