/* ============================================================
   CELLAR DOOR ARCHITECTURE — Foundations
   Soft Heritage palette + Span / Reason New type system
   ============================================================ */

/* -- Fonts -- */
@font-face {
  font-family: "Span";
  src: url("./fonts/Span-Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Span";
  src: url("./fonts/Span-LightItalic.otf") format("opentype");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Span";
  src: url("./fonts/Span-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Reason New";
  src: url("./fonts/Reason-New-Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------------------------------------------------------
     COLOR — Soft Heritage
     Two neutrals + one accent. Discipline is the system.
     --------------------------------------------------------- */
  --cd-bg:        #FAFAF9;  /* clean near-white, neutral       */
  --cd-bg-deep:   #F2F2F0;  /* deeper neutral panel            */
  --cd-ink:       #0A0A0A;  /* true black                      */
  --cd-ink-soft:  #5A5A5A;  /* neutral mid-grey                */
  --cd-rule:      #E8E8E6;  /* subtle divider                  */
  --cd-sage:      #1F2E3D;  /* accent — deep ink blue          */
  --cd-sage-deep: #131D26;  /* ink blue on press / focus rings */

  /* Semantic aliases */
  --fg-1: var(--cd-ink);
  --fg-2: var(--cd-ink-soft);
  --bg-1: var(--cd-bg);
  --bg-2: var(--cd-bg-deep);
  --rule: var(--cd-rule);
  --accent: var(--cd-sage);
  --accent-strong: var(--cd-sage-deep);

  /* ---------------------------------------------------------
     TYPE
     Span — workhorse sans for UI, body, captions, indices
     Reason New — display serif for editorial titles, italic accents
     --------------------------------------------------------- */
  --font-display: "Reason New", "Cormorant Garamond", "Times New Roman", serif;
  --font-sans:    "Span", "Söhne", "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace;

  /* Scale — editorial, generous */
  --t-display-xl: clamp(64px, 7.5vw, 124px); /* @kind font */
  --t-display-l:  clamp(48px, 5.5vw, 88px);  /* @kind font */
  --t-display-m:  clamp(36px, 4vw, 56px);    /* @kind font */
  --t-h1:         clamp(40px, 4.2vw, 64px);  /* @kind font */
  --t-h2:         clamp(28px, 2.6vw, 36px);  /* @kind font */
  --t-h3:         22px; /* @kind font */
  --t-body:       17px; /* @kind font */
  --t-small:      14px; /* @kind font */
  --t-micro:      11px;   /* eyebrows / indices, uppercase. @kind font */

  /* Tracking */
  --tr-eyebrow: 0.18em;  /* @kind font */
  --tr-button:  0.12em;  /* @kind font */
  --tr-tight:   -0.01em; /* @kind font */

  /* Line height */
  --lh-tight:    1.05; /* @kind font */
  --lh-display:  1.08; /* @kind font */
  --lh-heading:  1.15; /* @kind font */
  --lh-body:     1.55; /* @kind font */

  /* ---------------------------------------------------------
     SPACING — 4px base. Generous editorial rhythm.
     --------------------------------------------------------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;

  /* ---------------------------------------------------------
     RADII — almost nothing. Architecture is square.
     --------------------------------------------------------- */
  --r-0: 0; /* @kind radius */
  --r-xs: 1px; /* @kind radius */
  --r-sm: 2px; /* @kind radius */
  --r-pill: 999px; /* @kind radius */

  /* ---------------------------------------------------------
     LINES & SHADOWS — restrained
     --------------------------------------------------------- */
  --line-hair: 1px solid var(--cd-rule); /* @kind other */
  --line-ink:  1px solid var(--cd-ink);  /* @kind other */
  --shadow-soft: 0 1px 0 var(--cd-rule);
  --shadow-lift: 0 12px 32px -16px rgba(10, 10, 10, 0.18);

  /* ---------------------------------------------------------
     MOTION — slow, considered.
     --------------------------------------------------------- */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --dur-quick: 180ms; /* @kind other */
  --dur-base:  320ms; /* @kind other */
  --dur-slow:  520ms; /* @kind other */
}

/* ============================================================
   SEMANTIC ELEMENTS
   ============================================================ */
html, body {
  background: var(--bg-1);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: var(--t-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--t-h1);
  line-height: 1.02;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--fg-1);
  margin: 0;
}
h2, .h2 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--t-h2);
  line-height: 1.08;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--fg-1);
  margin: 0;
}
h3, .h3 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--t-h3);
  line-height: var(--lh-heading);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--fg-1);
  margin: 0;
}

.display-xl { font-family: var(--font-display); font-weight: 300; font-size: var(--t-display-xl); line-height: 1.0;  letter-spacing: 0.015em; text-transform: uppercase; }
.display-l  { font-family: var(--font-display); font-weight: 300; font-size: var(--t-display-l);  line-height: 1.02; letter-spacing: 0.02em;  text-transform: uppercase; }
.display-m  { font-family: var(--font-display); font-weight: 300; font-size: var(--t-display-m);  line-height: 1.05; letter-spacing: 0.025em; text-transform: uppercase; }

/* Body italic emphasis only. Display sizes never carry italic. */
.italic-accent {
  font-family: var(--font-sans);
  font-style: italic;
  font-weight: 300;
  text-transform: none;
  letter-spacing: 0;
}

/* Small caps labels (eyebrows, indices, nav) — Reason at small sizes */
.minicaps,
.eyebrow {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-2);
}

.subtitle {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--fg-1);
}

p, .body {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--fg-1);
}
.small { font-size: var(--t-small); color: var(--fg-2); }

.eyebrow,
.index {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--t-micro);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--fg-2);
}

a {
  color: var(--fg-1);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--dur-quick) var(--ease-out), border-color var(--dur-quick) var(--ease-out);
}
a:hover {
  color: var(--accent-strong);
  border-bottom-color: var(--accent);
}

hr, .rule {
  border: 0;
  border-top: var(--line-hair);
  margin: var(--s-6) 0;
}