/* BlackHaus Design Tokens — derived from Manual de Marca */
/* All real-estate references intentionally omitted */

:root {
  /* ── Brand base ────────────────────────────────────────────── */
  --bh-black:  #121212;
  --bh-taupe:  #B1A79B;
  --bh-orange: #F5854F;
  --bh-slate:  #878EA0;
  --bh-mist:   #DCE3EB;
  --bh-snow:   #F7FCFF;

  /* ── Nude family (taupe as compositional colour, not just border) ─ */
  --bh-nude:        #B1A79B;
  --bh-nude-light:  #CFC7BD;
  --bh-nude-deep:   #8C8377;
  --bh-nude-wash:   rgba(177, 167, 155, 0.08);
  --bh-nude-veil:   rgba(177, 167, 155, 0.16);

  /* ── Functional surfaces ──────────────────────────────────── */
  --bh-bg:          var(--bh-black);
  --bh-surface:     #1A1A1A;
  --bh-surface-2:   #222222;
  --bh-surface-3:   #2A2A2A;

  /* ── Text ────────────────────────────────────────────────── */
  --bh-text-primary:   var(--bh-snow);
  --bh-text-secondary: var(--bh-slate);
  --bh-text-muted:     rgba(247, 252, 255, 0.55);
  --bh-text-faint:     rgba(247, 252, 255, 0.32);

  /* ── Borders ─────────────────────────────────────────────── */
  --bh-border:        rgba(177, 167, 155, 0.18);
  --bh-border-strong: rgba(177, 167, 155, 0.38);
  --bh-border-bright: rgba(247, 252, 255, 0.12);

  /* ── Accents ─────────────────────────────────────────────── */
  --bh-accent:       var(--bh-orange);
  --bh-accent-hover: #FFA277;
  --bh-accent-dim:   rgba(245, 133, 79, 0.18);
  --bh-accent-soft:  rgba(245, 133, 79, 0.10);

  /* ── Spacing scale (4px base) ────────────────────────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-8:  48px;
  --space-10: 64px;
  --space-12: 96px;
  --space-16: 128px;
  --space-20: 160px;
  --space-24: 192px;

  /* ── Type scale (desktop default; rules override on mobile) ─ */
  --display-xl: clamp(3.5rem, 8.5vw, 7.5rem);   /* 56 → 120 */
  --display-lg: clamp(3rem,   6vw,   5rem);     /* 48 → 80 */
  --display-md: clamp(2.25rem, 4.2vw, 3.5rem);  /* 36 → 56 */
  --display-sm: clamp(1.75rem, 3vw,   2.5rem);  /* 28 → 40 */
  --headline:   clamp(1.25rem, 1.6vw, 1.5rem);  /* 20 → 24 */
  --body-lg:    clamp(1.125rem, 1.3vw, 1.25rem);/* 18 → 20 */
  --body:       1.0625rem;                      /* 17 */
  --body-sm:    0.9375rem;                      /* 15 */
  --caption:    0.8125rem;                      /* 13 */
  --label:      0.75rem;                        /* 12 */

  /* ── Layout ──────────────────────────────────────────────── */
  --container:        1440px;
  --container-narrow: 1120px;
  --container-prose:  720px;
  --gutter:           clamp(24px, 6vw, 96px);

  --header-h: 72px;
  --ticker-h: 36px;

  /* ── Motion ──────────────────────────────────────────────── */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:   180ms;
  --dur-base:   320ms;
  --dur-slow:   600ms;

  /* ── Radii ───────────────────────────────────────────────── */
  --radius-card:  8px;
  --radius-input: 4px;
  --radius-pill:  9999px;
}

@media (max-width: 768px) {
  :root {
    --ticker-h: 32px;
    --header-h: 64px;
  }
}