/* ============================================================
   Dreams — design tokens
   Source of truth: .claude/rules/brand-tokens.md + brand foundation spec.
   Six color tokens. Two fonts (Cormorant Garamond + Inter). Nothing else.
   ============================================================ */

/* ---- Self-hosted fonts (work offline; exact licensed WOFF2) ---- */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/cormorant-garamond-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/cormorant-garamond-medium.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/inter-light.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/inter-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/inter-medium.woff2') format('woff2');
}

/* ---- Tokens ---- */
:root {
  /* The only six colors in the system */
  --twilight: #2A3848;
  --sandstone: #5A3020;
  --ink: #1A1208;
  --cream: #FBEACD;
  --sun: #F4C870;
  --ember: #D09060;

  /* Translucent rules drawn from the print panels */
  --sun-rule: rgba(244, 200, 112, 0.55);
  --sun-rule-soft: rgba(244, 200, 112, 0.40);
  --cream-soft: rgba(251, 234, 205, 0.78);
  --cream-faint: rgba(251, 234, 205, 0.55);

  /* Type families */
  --serif: 'Cormorant Garamond', 'EB Garamond', Garamond, serif;
  --sans: 'Inter', 'Helvetica Neue', Arial, sans-serif;

  /* Fluid type scale, anchored to the brand-tokens web px values.
     Display 64 · Section 32 · Subhead 22 · Body 17 · Label 14 · Caption 14 */
  --fs-display: clamp(2.75rem, 6vw + 1rem, 4rem);   /* up to 64px */
  --fs-section: clamp(1.75rem, 2.4vw + 1rem, 2rem);  /* up to 32px */
  --fs-subhead: clamp(1.25rem, 1.2vw + 0.9rem, 1.375rem); /* up to 22px */
  --fs-body: 1.0625rem;                              /* 17px */
  --fs-label: 0.875rem;                              /* 14px */
  --fs-caption: 0.875rem;                            /* 14px */

  /* Spacing rhythm */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
  --space-6: 6rem;
  --maxw: 1120px;
}

/* ---- Reset ---- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; }

/* ---- Type roles (from brand-tokens.md) ---- */
.t-display {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: var(--fs-display); line-height: 1.05; letter-spacing: 0.04em;
}
.t-section {
  font-family: var(--serif); font-style: normal; font-weight: 500;
  font-size: var(--fs-section); line-height: 1.2;
}
.t-subhead {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: var(--fs-subhead); line-height: 1.3;
}
.t-body {
  font-family: var(--sans); font-weight: 400;
  font-size: var(--fs-body); line-height: 1.6;
}
.t-label {
  font-family: var(--sans); font-weight: 500;
  font-size: var(--fs-label); letter-spacing: 0.32em; text-transform: uppercase;
}
.t-caption {
  font-family: var(--sans); font-weight: 300; font-style: italic;
  font-size: var(--fs-caption); line-height: 1.5; opacity: 0.65;
}

/* ---- Signature surfaces ---- */
/* The cover gradient is the only allowed multi-stop blend (spec §3-4). */
.gradient-hero {
  background:
    radial-gradient(ellipse at 50% 62%, rgba(255,200,120,0.55) 0%, rgba(220,140,80,0.25) 18%, transparent 38%),
    linear-gradient(180deg,
      #2A3848 0%,
      #4A4860 18%,
      #8A6A68 38%,
      #D09060 55%,
      #B06848 65%,
      #5A3020 78%,
      #2A1810 100%);
}
/* Soft sun glow echo for dark sections (bottom-centred). */
.glow::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 88%,
    rgba(244,200,112,0.16) 0%, rgba(244,200,112,0.06) 22%, transparent 42%);
}
/* Atmospheric dust grain (subtle, not noisy). */
.grain::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 4px 4px;
}

/* Accessibility: visible focus on every interactive element */
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid var(--sun); outline-offset: 3px; border-radius: 2px;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}