/*
Theme Name: Daphne Barak — In the Room
Theme URI: https://daphnebarak.com
Author: Your Studio
Description: Custom theme for Daphne Barak — international interviewer and executive producer. Built for Elementor page building with ACF-driven content (Library, Books, Press). Cinematic, minimal, archive-of-record aesthetic.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: daphne-barak
*/

/* =========================================================
   style.css — design tokens + base reset ONLY.
   Every component / layout / responsive rule lives in
   assets/css/main.css (loaded after this file).
   ========================================================= */

:root{
  /* ---- Brand palette (matches approved reference) ---- */
  --ink: #14110F;
  --ink-2: #1C1815;
  --ink-3: #231E1A;
  --bone: #F3EEE5;
  --bone-2: #E8E1D5;
  --gold: #B08D4F;
  --gold-lt: #D2B173;
  --gold-br: #E6CC93;
  --rec: #D4332B;
  --bordeaux: #46201F;
  --bordeaux-lt: #5A2A28;
  --txt: #CFC7B8;
  --txt-mut: #9A917F;
  --line: rgba(176, 141, 79, .22);
  --line-2: rgba(243, 238, 229, .08);

  /* ---- Layout ---- */
  --bar: 64px;                              /* fixed header height */
  --maxw: 1240px;
  --gutter: clamp(20px, 5vw, 56px);

  /* ---- Typography ---- */
  --db-display: 'Bodoni Moda', serif;
  --db-body: 'Archivo', system-ui, sans-serif;
  --db-mono: 'IBM Plex Mono', monospace;

  /* ---- Legacy aliases (templates still use --db-*) ---- */
  --db-black: var(--ink);
  --db-black-raised: var(--ink-2);
  --db-black-raised-2: var(--ink-3);
  --db-maroon: var(--bordeaux);
  --db-maroon-deep: var(--bordeaux-lt);
  --db-paper: var(--bone);
  --db-paper-2: var(--bone-2);
  --db-paper-dim: var(--txt-mut);
  --db-text: var(--txt);
  --db-rec: var(--rec);
  --db-gold: var(--gold);
  --db-gold-lt: var(--gold-lt);
  --db-gold-br: var(--gold-br);
  --db-hairline: var(--line);
  --db-hairline-2: var(--line-2);
  --db-container: var(--maxw);
  --db-gutter: var(--gutter);
}

/* ---------- Base reset ---------- */
*, *::before, *::after{ box-sizing: border-box; }

html{
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body{
  margin: 0;
  padding-top: var(--bar);                  /* offset for the fixed header */
  background: var(--ink);
  color: var(--bone);
  font-family: var(--db-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img{ max-width: 100%; display: block; }

a{ color: inherit; text-decoration: none; }

h1, h2, h3, h4{
  font-family: var(--db-display);
  font-weight: 700;
  line-height: 1.04;
  margin: 0 0 .4em;
  letter-spacing: -.01em;
}

::selection{ background: var(--gold); color: var(--ink); }

:focus-visible{
  outline: 2px solid var(--gold-br);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce){
  *{
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}