/* ============================================================
   PÉROLA BOVIS · colors_and_type.css
   Base tokens (color + type + spacing) and semantic elements.
   Import once at the root of any page:
     <link rel="stylesheet" href="/colors_and_type.css">
   ============================================================ */

/* ---------- Web fonts ---------- */
/* Primary source: Google Fonts (spec). Local TTFs under /fonts/ are
   kept as offline fallbacks — they ship with the brand docx. */
@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,600&family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=Fira+Mono:wght@400;500;700&family=Noto+Serif+SC:wght@400;500;700&display=swap");

@font-face {
  font-family: "PB Garamond Local";
  src: url("/fonts/Garamond-regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "PB Garamond Local";
  src: url("/fonts/Garamond-bold.ttf") format("truetype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "PB Garamond Local";
  src: url("/fonts/Garamond-italic.ttf") format("truetype");
  font-weight: 400; font-style: italic; font-display: swap;
}

/* ============================================================
   :root tokens
   ============================================================ */
:root {
  /* ---------- Color — primary ---------- */
  --black:        #0C0907;  /* base background */
  --gold:         #C4882F;  /* destaque / CTA / borders */
  --gold-light:   #D4A853;  /* hover, CN characters, highlights */
  --cream:        #F5E8C0;  /* text on dark */
  --amber-deep:   #5C2E10;  /* contrast sections */
  --white:        #FFFFFF;

  /* ---------- Color — functional aliases ---------- */
  --bg:            var(--black);
  --bg-contrast:   var(--amber-deep);
  --fg1:           var(--cream);              /* primary text on bg */
  --fg2:           #C8B88A;                   /* secondary text (cream @ ~75%) */
  --fg3:           #8A7A54;                   /* tertiary / meta */
  --accent:        var(--gold);
  --accent-hi:     var(--gold-light);
  --hairline:      rgba(196, 136, 47, 0.28);  /* gold @ 28% — borders */
  --hairline-soft: rgba(196, 136, 47, 0.15);  /* gold @ 15% — timeline rail */
  --surface:       rgba(196, 136, 47, 0.06);  /* card fill on bg */
  --surface-hi:    rgba(196, 136, 47, 0.10);
  --overlay:       rgba(12, 9, 7, 0.72);      /* image overlay */

  /* ---------- Type families ---------- */
  --font-display:  "Cormorant Garamond", "PB Garamond Local", "EB Garamond", Georgia, "Times New Roman", serif;
  --font-body:     "Montserrat", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --font-mono:     "Fira Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --font-cn:       "Noto Serif SC", "Cormorant Garamond", serif; /* Chinese glyphs */

  /* ---------- Type scale — 1.25 Major Third ---------- */
  --fs-caption:    0.8125rem;  /* 13 */
  --fs-body:       1rem;       /* 16 */
  --fs-body-lg:    1.25rem;    /* 20 */
  --fs-h4:         1.9375rem;  /* 31 */
  --fs-h3:         2.4375rem;  /* 39 */
  --fs-h2:         3.0625rem;  /* 49 */
  --fs-h1:         3.8125rem;  /* 61 */

  /* Fluid clamp versions — use for responsive pages */
  --fs-h1-fluid:   clamp(2.5rem, 4.5vw + 1rem, 3.8125rem);
  --fs-h2-fluid:   clamp(2rem,   3vw  + 1rem, 3.0625rem);
  --fs-h3-fluid:   clamp(1.5rem, 2vw  + 1rem, 2.4375rem);
  --fs-h4-fluid:   clamp(1.25rem,1.2vw+ 1rem, 1.9375rem);

  /* ---------- Letter-spacing ---------- */
  --tracking-tight:   -0.01em;
  --tracking-normal:   0;
  --tracking-wide:     0.08em;
  --tracking-wider:    0.12em;   /* buttons */
  --tracking-widest:   0.24em;   /* section tags */

  --leading-tight:  1.1;
  --leading-snug:   1.25;
  --leading-body:   1.6;
  --leading-loose:  1.8;

  /* ---------- Spacing — 8pt system ---------- */
  --space-xs:   0.25rem;   /*  4 */
  --space-sm:   0.5rem;    /*  8 */
  --space-md:   1rem;      /* 16 */
  --space-lg:   1.5rem;    /* 24 */
  --space-xl:   2rem;      /* 32 */
  --space-2xl:  3rem;      /* 48 */
  --space-3xl:  4rem;      /* 64 */
  --space-4xl:  6rem;      /* 96 */
  --space-5xl:  8rem;      /* 128 */

  /* ---------- Layout ---------- */
  --container:      1200px;
  --gutter:         max(24px, 6vw);
  --breakpoint-md:  768px;
  --nav-h:          60px;

  /* ---------- Radii (used sparingly — brand is square/austere) ---------- */
  --radius-none:   0;
  --radius-xs:     2px;
  --radius-sm:     4px;
  --radius-md:     8px;   /* cards, inputs */
  --radius-pill:   999px; /* badges only */

  /* ---------- Elevation / shadow ----------
     Brand avoids drop shadows. What gives depth is the gold hairline
     and the inner-lit ember glow — use these tokens instead of bare
     box-shadows. */
  --shadow-none:   none;
  --ring-gold:     0 0 0 1px var(--hairline);
  --ring-gold-hi:  0 0 0 1px var(--gold);
  --glow-ember:    0 0 48px -8px rgba(196, 136, 47, 0.35);
  --glow-inner:    inset 0 0 60px -20px rgba(196, 136, 47, 0.18);

  /* ---------- Motion ---------- */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);      /* power3.out equivalent */
  --ease-in:    cubic-bezier(0.64, 0, 0.78, 0);
  --ease-back:  cubic-bezier(0.34, 1.56, 0.64, 1);   /* back.out(2) */
  --dur-fast:   220ms;
  --dur-med:    450ms;
  --dur-slow:   900ms;
  --dur-hero:   1200ms;
}

/* ============================================================
   Base — base page defaults
   ============================================================ */
html { box-sizing: border-box; -webkit-text-size-adjust: 100%; }
*, *::before, *::after { box-sizing: inherit; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg1);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Selection */
::selection { background: var(--gold); color: var(--black); }

/* ============================================================
   Semantic type — h1..h4, p, small, code, blockquote, cn
   ============================================================ */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--fg1);
  font-weight: 600;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--space-md);
}

h1 { font-size: var(--fs-h1-fluid); font-weight: 600; }
h2 { font-size: var(--fs-h2-fluid); font-weight: 600; }
h3 { font-size: var(--fs-h3-fluid); font-weight: 400; }
h4 { font-size: var(--fs-h4-fluid); font-weight: 400; }

/* Display caps — hero marks */
.display-hero {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(3rem, 7vw, 5.5rem);
  letter-spacing: 0.02em;
  line-height: 1.05;
  color: var(--fg1);
}

p {
  margin: 0 0 var(--space-md);
  color: var(--fg1);
  max-width: 68ch;
}

.lead, p.lead {
  font-size: var(--fs-body-lg);
  font-weight: 300;
  color: var(--fg1);
  line-height: var(--leading-body);
  max-width: 56ch;
}

small, .caption {
  font-size: var(--fs-caption);
  font-weight: 500;
  color: var(--fg2);
  line-height: 1.5;
}

/* Section tags — uppercase, wide tracking */
.tag, .section-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--gold);
}
.section-tag::before {
  content: "";
  width: 24px; height: 1px;
  background: var(--gold);
}

/* Italic Garamond pull-quote */
blockquote, .quote {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--fs-h4-fluid);
  line-height: 1.35;
  color: var(--fg1);
  margin: 0;
  padding-left: var(--space-lg);
  border-left: 1px solid var(--hairline);
}

/* Chinese characters — always rendered in gold-light */
.cn {
  font-family: var(--font-cn);
  color: var(--gold-light);
  font-weight: 500;
  letter-spacing: 0.08em;
}
.cn-display {
  font-family: var(--font-cn);
  color: var(--gold-light);
  font-weight: 500;
  font-size: clamp(3.5rem, 8vw, 6rem);
  line-height: 1;
  letter-spacing: 0.12em;
}

/* Code / mono */
code, kbd, pre {
  font-family: var(--font-mono);
  font-size: 0.9em;
  color: var(--gold-light);
}
code { background: var(--surface); padding: 0.15em 0.4em; border-radius: var(--radius-xs); }

/* Links */
a {
  color: var(--gold-light);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--gold); border-bottom-color: var(--gold); }

/* Horizontal hairline rule */
hr {
  border: 0;
  height: 1px;
  background: var(--hairline-soft);
  margin: var(--space-2xl) 0;
}

/* Utility classes — lightweight, scoped */
.u-cream  { color: var(--cream); }
.u-gold   { color: var(--gold); }
.u-gold-light { color: var(--gold-light); }
.u-fg2    { color: var(--fg2); }
.u-center { text-align: center; }
.u-mono   { font-family: var(--font-mono); }
.u-caps   { text-transform: uppercase; letter-spacing: var(--tracking-wider); }

/* Respect user motion preferences */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}