/* Takwid Estates design tokens (brand board logo_layout.svg, 2026-09-27).
   - Four brand colors at full strength: forest #073A32, leaf #529339, marigold #EEA73B, orchid #E9A6D2.
   - Forest shades are for layered dark panels; the leaf tints are for small text only.
   - Every diagonal follows the logo's pitch (--pitch).
   Contrast notes are against the surface each token is meant for. */

@font-face {
  font-family: "Sora";
  src: url("/assets/fonts/sora-latin-var.woff2") format("woff2");
  font-weight: 400 800;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/inter-latin-var.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}

:root {
  /* Forest: layered panel greens */
  --forest-950: #05241f;
  --forest-900: #063029;
  --forest-800: #073a32; /* brand base */
  --forest-700: #0a4d43;
  --forest-600: #165a50;
  --forest-500: #2a6f65;
  --forest-200: #cde4e1;
  --forest-100: #e4f1ef;

  /* Brand palette (logo_layout.svg board, 2026-09-27): forest, leaf, marigold, orchid. Graphics use these
     exact values. The leaf tints share leaf's hue and saturation and are for small text only. */
  --leaf: #529339;       /* stripes, marks, rules, illustration fields */
  --leaf-light: #aad798; /* text and links on forest-800: 7.8:1 */
  --leaf-dark: #3e6e2b;  /* eyebrows and labels on white 6.0:1, on linen 5.2:1 */
  --accent-marigold: #eea73b;
  --accent-orchid: #e9a6d2;
  /* Older names, kept as aliases so nothing drifts from the palette */
  --accent-leaf: var(--leaf);
  --leaf-300: var(--leaf-light);
  --leaf-400: var(--leaf);
  --leaf-600: var(--leaf);
  --leaf-700: var(--leaf-dark);

  /* Warm neutrals */
  --linen: #f5efea;
  --paper: #fbf8f5;
  --white: #ffffff;
  --stone-200: #e4dcd5;
  --stone-300: #d2c8bf;
  --ink: #13241e; /* body text on linen: 14:1 */
  --ink-muted: #4a5952; /* 6.9:1 on paper */
  --ink-subtle: #5e6b65; /* 5.3:1 on paper */

  /* Feedback */
  --danger: #b42318;
  --danger-bg: #fef3f2;
  --success: #1f7a4d;
  --success-bg: #edf7f1;

  /* Typography */
  --font-display: "Sora", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --font-text: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --text-xs: 0.8125rem;
  --text-sm: 0.9375rem;
  --text-md: 1.0625rem;
  --text-lg: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem);
  --h4: clamp(1.125rem, 1.08rem + 0.25vw, 1.25rem);
  --h3: clamp(1.25rem, 1.12rem + 0.55vw, 1.5rem);
  --h2: clamp(1.85rem, 1.45rem + 1.7vw, 2.75rem);
  --h1: clamp(2.35rem, 1.6rem + 3.1vw, 4.1rem);
  --tracking-tight: -0.02em;
  --tracking-eyebrow: 0.2em;

  /* Space (4px base) */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-s: 1rem;
  --space-m: 1.5rem;
  --space-l: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4.5rem;
  --space-section: clamp(4.5rem, 3rem + 6vw, 9rem);

  /* Shape, depth, motion: square corners everywhere (brand rule) */
  --radius-xs: 0;
  --radius-s: 0;
  --radius-m: 0;
  --radius-l: 0;
  --radius-full: 0;
  --shadow-1: 0 1px 2px rgb(5 36 31 / 0.07), 0 1px 1px rgb(5 36 31 / 0.04);
  --shadow-2: 0 18px 40px -18px rgb(5 36 31 / 0.35);
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-1: 140ms;
  --dur-2: 240ms;

  /* Layout */
  --container: 1160px;
  --gutter: clamp(1rem, 0.6rem + 2.4vw, 2rem);

  /* Every diagonal follows the logo's roof and stripes: 0.4247 rise per run, about 23° */
  --pitch: 0.4247;

  /* Critical calls to action: marigold with deep forest text (7:1) */
  --cta-bg: var(--accent-marigold);
  --cta-bg-hover: #e3992a;
  --cta-fg: var(--forest-900);

  /* Light surface defaults: white space first, linen for quiet panels */
  --surface: var(--white);
  --surface-raised: var(--paper);
  --text: var(--ink);
  --text-muted: var(--ink-muted);
  --heading: var(--forest-800);
  --eyebrow: var(--leaf-700);
  --link: var(--forest-700);
  --border: var(--stone-200);
  --focus: var(--forest-800);
  --logo-house: var(--forest-800);
  --logo-stripes: var(--leaf);
  --logo-word: var(--forest-800);
  --logo-sub: var(--leaf);
}

/* Dark surfaces: forest panels, header, footer */
.on-dark {
  --surface: var(--forest-800);
  --surface-raised: var(--forest-700);
  --text: #eef2ef;
  --text-muted: #c3d0c9; /* 8.9:1 on forest-800 */
  --heading: var(--white);
  --eyebrow: var(--leaf-300);
  --link: var(--leaf-300);
  --border: rgb(255 255 255 / 0.14);
  --focus: var(--leaf-300);
  --logo-house: var(--leaf);
  --logo-stripes: var(--white);
  --logo-word: var(--white);
  --logo-sub: var(--leaf);
}