/* ============================================================
   PIETRA — Colors + Typography Foundation
   v1.0 · April 2026
   Architectural · Editorial · Warm Restraint
   ============================================================ */

/* ── Brand fonts: Playfair Display, Cormorant Garamond, Source Serif 4, and
   DM Sans are self-hosted from /fonts. JetBrains Mono is still loaded from
   Google Fonts — request a TTF from the user to fully self-host. ── */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500&display=swap');

/* Source Serif 4 — variable axes (opsz, wght) */
@font-face {
  font-family: 'Source Serif 4';
  src: url('fonts/SourceSerif4_opsz_wght_.ttf') format('truetype-variations');
  font-weight: 200 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Source Serif 4';
  src: url('fonts/SourceSerif4-Italic_opsz_wght_.ttf') format('truetype-variations');
  font-weight: 200 900; font-style: italic; font-display: swap;
}

/* DM Sans */
@font-face {
  font-family: 'DM Sans';
  src: url('fonts/DMSans-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('fonts/DMSans-Italic.ttf') format('truetype');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('fonts/DMSans-Medium.ttf') format('truetype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('fonts/DMSans-MediumItalic.ttf') format('truetype');
  font-weight: 500; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('fonts/DMSans-Bold.ttf') format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('fonts/DMSans-BoldItalic.ttf') format('truetype');
  font-weight: 700; font-style: italic; font-display: swap;
}

/* Playfair Display — brand-supplied TTF */
@font-face {
  font-family: 'Playfair Display';
  src: url('fonts/PlayfairDisplay-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Playfair Display';
  src: url('fonts/PlayfairDisplay-Italic.ttf') format('truetype');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Playfair Display';
  src: url('fonts/PlayfairDisplay-Bold.ttf') format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Playfair Display';
  src: url('fonts/PlayfairDisplay-BoldItalic.ttf') format('truetype');
  font-weight: 700; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Playfair Display';
  src: url('fonts/PlayfairDisplay-Black.ttf') format('truetype');
  font-weight: 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Playfair Display';
  src: url('fonts/PlayfairDisplay-BlackItalic.ttf') format('truetype');
  font-weight: 900; font-style: italic; font-display: swap;
}

/* Cormorant Garamond — brand-supplied TTF */
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('fonts/CormorantGaramond-Light.ttf') format('truetype');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('fonts/CormorantGaramond-LightItalic.ttf') format('truetype');
  font-weight: 300; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('fonts/CormorantGaramond-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('fonts/CormorantGaramond-Italic.ttf') format('truetype');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('fonts/CormorantGaramond-Medium.ttf') format('truetype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('fonts/CormorantGaramond-MediumItalic.ttf') format('truetype');
  font-weight: 500; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('fonts/CormorantGaramond-SemiBold.ttf') format('truetype');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('fonts/CormorantGaramond-SemiBoldItalic.ttf') format('truetype');
  font-weight: 600; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('fonts/CormorantGaramond-Bold.ttf') format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('fonts/CormorantGaramond-BoldItalic.ttf') format('truetype');
  font-weight: 700; font-style: italic; font-display: swap;
}

:root {
  /* ── Primary ── */
  --color-primary: #8B2332;          /* Pompeian Red */
  --color-primary-light: #A63446;
  --color-primary-dark: #6B1A27;

  /* ── Neutrals (warm, earth-derived) ── */
  --color-warm-white: #FFFDF8;
  --color-cream: #F7F3ED;
  --color-sand: #EDE8DF;
  --color-stone: #D4CEC4;
  --color-warm-gray: #9B9488;
  --color-charcoal: #4A4640;
  --color-espresso: #2C2926;
  --color-near-black: #1A1816;

  /* ── Accents ── */
  --color-terracotta: #C4784A;
  --color-sage: #7A8B6F;
  --color-slate: #5E6B73;
  --color-gold: #B8965A;
  --color-ivory: #F0E8D8;

  /* ── Semantic ── */
  --color-success: #7A8B6F;
  --color-warning: #B8965A;
  --color-error: #8B2332;
  --color-info: #5E6B73;

  /* ── Semantic foreground/background tokens ── */
  --bg-page: var(--color-warm-white);
  --bg-card: var(--color-warm-white);
  --bg-alt: var(--color-cream);
  --bg-subtle: var(--color-sand);
  --fg1: var(--color-espresso);          /* Headings */
  --fg2: var(--color-charcoal);          /* Body */
  --fg3: var(--color-warm-gray);         /* Metadata, captions */
  --fg-inverse: var(--color-warm-white);
  --border-default: var(--color-sand);
  --border-strong: var(--color-stone);

  /* ── Typography families ── */
  --font-display: 'Playfair Display', 'Times New Roman', serif;
  --font-heading: 'Cormorant Garamond', 'Times New Roman', serif;
  --font-body: 'Source Serif 4', Georgia, serif;
  --font-ui: 'DM Sans', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

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

  /* ── Radii ── */
  --radius-sm: 4px;        /* badges */
  --radius-md: 8px;        /* buttons */
  --radius-lg: 12px;       /* cards */
  --radius-xl: 16px;
  --radius-full: 9999px;   /* pills, search bar */

  /* ── Shadows (warm, low-contrast) ── */
  --shadow-sm: 0 1px 2px rgba(44, 41, 38, 0.04);
  --shadow-md: 0 2px 20px rgba(44, 41, 38, 0.08);
  --shadow-lg: 0 8px 40px rgba(44, 41, 38, 0.12);
  --shadow-card-hover: 0 12px 36px rgba(44, 41, 38, 0.14);

  /* ── Motion ── */
  --transition-default: 300ms ease-out;
  --transition-slow: 400ms ease-in-out;
  --transition-reveal: 600ms ease-out;
  --transition-card: 250ms ease-out;

  /* ── Layout ── */
  --max-width: 1200px;
  --page-margin-mobile: 32px;
  --page-margin-tablet: 64px;
  --page-margin-desktop: 96px;
}

/* ── Dark mode (warm, never blue-tinted) ── */
[data-theme="dark"] {
  --bg-page: var(--color-near-black);
  --bg-card: var(--color-espresso);
  --bg-alt: var(--color-espresso);
  --bg-subtle: var(--color-charcoal);
  --fg1: var(--color-warm-white);
  --fg2: var(--color-stone);
  --fg3: var(--color-warm-gray);
  --border-default: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.14);
  --shadow-md: 0 2px 20px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.4);
}

/* ============================================================
   SEMANTIC TYPE TOKENS
   ============================================================ */

.t-display-xl,
.display-xl {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 56px;
  line-height: 1.1;
  letter-spacing: 0.02em;
  color: var(--fg1);
}

.t-display,
.display {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 42px;
  line-height: 1.15;
  letter-spacing: 0.02em;
  color: var(--fg1);
}

.t-h1, h1 {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 32px;
  line-height: 1.25;
  letter-spacing: 0.01em;
  color: var(--fg1);
}

.t-h2, h2 {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 24px;
  line-height: 1.3;
  color: var(--fg1);
}

.t-h3, h3 {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.3;
  color: var(--fg1);
}

.t-body-l,
.lead {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.75;
  color: var(--fg2);
}

.t-body, p, body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.75;
  color: var(--fg2);
}

.t-body-s {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.7;
  color: var(--fg2);
}

.t-ui {
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  color: var(--fg2);
}

.t-ui-sm {
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.5;
  color: var(--fg3);
}

.t-caption {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg3);
}

.t-overline {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 10px;
  line-height: 1.4;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg3);
}

.t-quote {
  font-family: var(--font-heading);
  font-weight: 300;
  font-style: italic;
  font-size: 26px;
  line-height: 1.4;
  color: var(--fg1);
}

code, kbd, samp, pre, .t-mono {
  font-family: var(--font-mono);
  font-size: 13px;
}

em, i { font-style: italic; }
strong, b { font-weight: 500; } /* bold in body breaks editorial tone — use italic for emphasis */

body {
  background: var(--bg-page);
  color: var(--fg2);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
}