/**
 * VEYRA ESTATE — design tokens.
 *
 * Every value here comes from VEYRA_ESTATE_brandbook.pdf (v1.0, 2026) —
 * see docs/brand-system.md for the practical web summary and page
 * references. Nothing in this file is a stylistic guess: colors, type
 * scale, spacing, radii and timings are transcribed, not invented.
 *
 * No component should hardcode a color/size that has a token here.
 */

:root {
  color-scheme: light;

  /* ---- Brand palette (brandbook p.14) ---- */
  --color-graphite: #1F2528;
  --color-ivory: #F3EFE7;
  --color-sand: #C8B99A;
  --color-olive: #6F6657;
  --color-charcoal: #2B2A27;
  --color-gold: #A9895C;

  /* Signal colors — system UI states ONLY, never marketing (p.25) */
  --color-success: #127A35;
  --color-warning: #C9761F;
  --color-error: #C0392B;
  --color-info: #6F6657;

  /* ---- Semantic aliases (so components read intent, not raw hex) ---- */
  --color-bg: var(--color-ivory);
  --color-bg-dark: var(--color-graphite);
  --color-bg-deep: var(--color-charcoal);
  --color-surface-raised: var(--color-sand);
  --color-text: var(--color-graphite);
  --color-text-on-dark: var(--color-ivory);
  --color-text-muted: var(--color-olive);
  --color-border: var(--color-sand);
  --color-border-on-dark: rgba(243, 239, 231, 0.3);
  --color-accent: var(--color-gold);
  --color-focus-ring: var(--color-gold);

  /* ---- Typography (p.17-18) ---- */
  --font-display: "Cormorant Garamond", "Times New Roman", Georgia, serif;
  --font-ui: "Manrope", Arial, Helvetica, sans-serif;

  --text-h1-size: 40px;
  --text-h1-line: 44px;
  --text-h2-size: 28px;
  --text-h2-line: 32px;
  --text-h3-size: 20px;
  --text-h3-line: 26px;
  --text-h3-tracking: 0.01em;
  --text-overline-size: 10px;
  --text-overline-line: 14px;
  --text-overline-tracking: 0.2em;
  --text-lead-size: 16px;
  --text-lead-line: 26px;
  --text-body-size: 14px;
  --text-body-line: 23px;
  --text-caption-size: 11px;
  --text-caption-line: 16px;
  --text-caption-tracking: 0.01em;
  --text-button-size: 12px;
  --text-button-tracking: 0.16em;
  /* Hero title is the one explicitly responsive size in the brandbook (p.24) */
  /* Brandbook p. 24: the first screen's heading runs 44px on a phone to
     56px on a desktop. It was 32px here, which was our own invention. */
  --text-hero-size-mobile: 44px;
  --text-hero-line-mobile: 48px;
  --text-hero-size-desktop: 56px;
  --text-hero-line-desktop: 60px;
  --text-hero-tracking: 0.04em;

  /* ---- Spacing (8px vertical rhythm, p.20) ---- */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 48px;
  --space-6: 64px;
  --space-7: 96px;

  /* ---- Grid (p.20, p.24) ---- */
  --container-max: 1280px;
  --container-padding-mobile: 20px;
  --container-padding-desktop: 80px;
  --grid-gutter: 24px;
  --section-spacing-mobile: 64px;
  --section-spacing-desktop: 120px;

  /* ---- Components ---- */
  --button-height: 48px;
  --touch-target-min: 44px;
  --radius: 0; /* brand rule: no rounding anywhere except round avatars/status dots */

  /* ---- Motion (p.25): 200-300ms, ease-out, opacity/translate only ---- */
  --transition-default: 240ms ease-out;
}