/* ═══════════════════════════════════════════════════════════
   Zen Zahrada — Colors & Type tokens
   Amber on near-black, warm gold accents, serif display.
   ═══════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal; font-weight: 500 600; font-display: swap;
  src: url('fonts/cormorant-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal; font-weight: 500 600; font-display: swap;
  src: url('fonts/cormorant-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root {
  /* ── Gold scale (warm honey-amber) ── */
  --gold-700: #9a7020;
  --gold-500: #c89632;
  --gold-400: #e8b84b;
  --gold-200: #f5d98a;

  /* ── Dark surfaces ── */
  --surface-base:   #0f0d0a;
  --surface-side:   #0c0a07;
  --surface-raised: #141209;
  --surface-float:  #1a1710;

  /* ── Borders (gold-tinted, translucent) ── */
  --border-s: rgba(180,130,60,.10);
  --border-d: rgba(180,130,60,.18);
  --border-a: rgba(180,130,60,.38);

  /* ── Text ── */
  --text:    #e8d5b0;   /* warm amber body text */
  --text2:   #b8a080;   /* secondary */
  --muted:   rgba(200,160,80,.42);
  --on-gold: #1a1208;   /* dark text on gold buttons */

  /* ── Semantic accents ── */
  --jade:    #4d9470;   /* calm success, "idle" state */
  --err:     #c07858;   /* warm terracotta error */

  /* ── Motion ── */
  --t-f: 140ms cubic-bezier(.4,0,.2,1);
  --t-m: 220ms cubic-bezier(.4,0,.2,1);
  --t-s: 380ms cubic-bezier(.16,1,.3,1);

  /* ── Layout ── */
  --sw:  234px;   /* sidebar width */
  --bnh: 62px;    /* bottom-nav height on mobile */
  --r:   10px;    /* card radius */
  --rs:  6px;     /* small radius (inputs, buttons) */

  /* ── Shadows ── */
  --shadow-card: 0 1px 2px rgba(0,0,0,.4), 0 4px 16px rgba(0,0,0,.28), inset 0 1px 0 rgba(200,160,60,.06);
  --shadow-card-hover: 0 1px 2px rgba(0,0,0,.4), 0 10px 28px rgba(0,0,0,.38), inset 0 1px 0 rgba(200,160,60,.10);
  --shadow-float: 0 24px 80px rgba(0,0,0,.75), inset 0 1px 0 rgba(200,160,60,.08);
  --glow-gold: 0 0 24px rgba(200,150,50,.25);

  /* ── Typography families ── */
  --font-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-sans: 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* ── Type scale ── */
  --fs-xs:   0.68rem;   /* ~10.9px — meta, eyebrows, badges */
  --fs-sm:   0.78rem;   /* ~12.5px — captions */
  --fs-base: 0.92rem;   /* ~14.7px — body */
  --fs-md:   1.08rem;   /* ~17.3px — lead */
  --fs-lg:   1.25rem;   /* ~20px   — page title */
  --fs-xl:   1.6rem;    /* ~25.6px — h2 display */
  --fs-2xl:  2rem;      /* ~32px   — stat number */
  --fs-3xl:  2.6rem;    /* ~41px   — doc title */
  --fs-4xl:  3.5rem;    /* ~56px   — cover display */

  --lh-tight: 1.1;
  --lh-snug:  1.35;
  --lh-normal: 1.6;

  --tracking-tight: -.015em;
  --tracking-normal: 0;
  --tracking-eyebrow: .14em;
  --tracking-stamp: .22em;
}

/* ── Semantic element styles ──
   Opt-in via class or scope. Body uses sans by default; serif is for display.
*/

.zz-body {
  font-family: var(--font-sans);
  font-size: 15px; line-height: var(--lh-normal);
  color: var(--text); background: var(--surface-base);
  -webkit-font-smoothing: antialiased;
}

.zz-h1, h1.zz {
  font-family: var(--font-serif);
  font-weight: 500; letter-spacing: .03em;
  font-size: var(--fs-4xl); line-height: 1.05;
  color: var(--gold-200);
}
.zz-h2, h2.zz {
  font-family: var(--font-serif);
  font-weight: 500; letter-spacing: .015em;
  font-size: var(--fs-xl); line-height: var(--lh-snug);
  color: var(--gold-200);
}
.zz-h3, h3.zz {
  font-family: var(--font-serif);
  font-weight: 600; letter-spacing: .01em;
  font-size: 1.18rem; line-height: var(--lh-snug);
  color: var(--gold-400);
}

/* Section label — the canonical small caps heading used across the admin */
.zz-sec-label {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Eyebrow — above a big heading, even more spaced out */
.zz-eyebrow {
  font-family: var(--font-sans);
  font-size: 11.5px;
  letter-spacing: var(--tracking-stamp);
  text-transform: uppercase;
  color: var(--gold-500);
}

.zz-lead {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-md);
  line-height: 1.55;
  color: var(--text);
}

.zz-body-text, p.zz {
  font-family: var(--font-sans);
  font-size: 13.5px; line-height: var(--lh-normal);
  color: var(--text);
}

.zz-small {
  font-family: var(--font-sans);
  font-size: 11.5px;
  color: var(--text2);
}

.zz-num {
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--text);
}

.zz-hz {
  font-family: var(--font-serif);
  font-weight: 600;
  color: var(--gold-400);
  letter-spacing: .02em;
}