/* ============================================================
   PROSPERUS CO. - DESIGN TOKENS
   Luxury brand + product + AI workflow studio.
   Typography: Cormorant Garamond (display) + Jost (body/UI).
   ============================================================ */

/* Fonts loaded via <link> in each template head. */

:root {
  /* ---- Core palette (obsidian / platinum / champagne) ---- */
  --aubergine:      #151017;  /* primary dark canvas */
  --aubergine-deep: #09070A;  /* deepest panels, footer */
  --plum-ink:       #161115;  /* darkest text on light surfaces */
  --clay:           #C8A96B;  /* champagne accent */
  --caramel:        #E2D2AD;  /* pale champagne highlight */
  --rose:           #9B6F73;  /* muted wine secondary */
  --terracotta:     #B8A07A;  /* mineral-gold accent */
  --terra:          #8B6A3A;  /* readable champagne on light */
  --cream:          #F5F0E8;  /* text on dark */
  --oat:            #F3EEE6;  /* primary light background */
  --sand:           #E7DED2;  /* warm platinum surface */
  --heather:        #B8B0AD;  /* muted text on dark */
  --mauve-mute:     #5F575A;  /* muted text on light */
  --line:           rgba(22,17,21,0.13);     /* hairline on light */
  --line-dark:      rgba(245,240,232,0.16);  /* hairline on dark */

  /* ---- Semantic (default = light) ---- */
  --bg:        var(--oat);
  --surface:   var(--sand);
  --text:      var(--plum-ink);
  --text-mute: var(--mauve-mute);
  --accent:    var(--clay);

  /* ---- Type families ---- */
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-accent:  'Cormorant Garamond', Georgia, serif;
  --font-body:    'Jost', 'Helvetica Neue', Arial, sans-serif;

  /* ---- Typography roles ---- */
  --weight-display: 500;
  --weight-heading: 500;
  --weight-accent: 400;
  --weight-body: 400;
  --weight-ui: 600;

  /* ---- Responsive type scale (fixed breakpoints, no viewport-width font math) ---- */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-md: 1.125rem;
  --text-lg: 1.25rem;
  --text-xl: 1.625rem;
  --text-2xl: 2.25rem;
  --text-3xl: 3.25rem;
  --text-hero: 4.25rem;
  --text-hero-lg: 4.5rem;

  /* Backward-compatible aliases */
  --step--1: var(--text-xs);
  --step-0:  var(--text-base);
  --step-1:  var(--text-md);
  --step-2:  var(--text-lg);
  --step-3:  var(--text-xl);
  --step-4:  var(--text-2xl);
  --step-5:  var(--text-3xl);
  --step-6:  var(--text-hero);

  --leading-display: 0.88;
  --leading-tight: 0.96;
  --leading-heading: 1.02;
  --leading-body:  1.62;

  --tracking-display: 0;
  --tracking-heading: 0;
  --tracking-body: 0;
  --tracking-label: 0.13em;
  --tracking-button: 0;

  --measure-copy: 62ch;
  --measure-narrow: 46ch;
  --measure-heading: 14ch;

  /* Legacy aliases used by the original HTML files */
  --display: var(--font-display);
  --serif: var(--font-accent);
  --body: var(--font-body);

  /* ---- Spacing (8pt) ---- */
  --space-1:.5rem; --space-2:1rem; --space-3:1.5rem;
  --space-4:2rem; --space-5:3rem; --space-6:5rem; --space-7:8rem;

  /* ---- Radius & motion ---- */
  --radius-sm:8px; --radius-md:14px; --radius-lg:20px; --radius-xl:28px;
  --ease: cubic-bezier(0.2,0.8,0.2,1);
  --dur: 280ms;
  --maxw: 1160px;
}

@media (min-width: 760px) {
  :root {
    --text-xl: 2rem;
    --text-2xl: 3rem;
    --text-3xl: 4.35rem;
    --text-hero: 7rem;
    --text-hero-lg: 8rem;
  }
}

@media (min-width: 1120px) {
  :root {
    --text-xl: 2.35rem;
    --text-2xl: 3.55rem;
    --text-3xl: 5.4rem;
    --text-hero: 10.6rem;
    --text-hero-lg: 12.5rem;
  }
}

/* ---- Helper primitives ---- */
.eyebrow {
  font-family: var(--font-body);
  font-weight: var(--weight-ui);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  font-size: var(--text-xs);
  color: var(--terra);
}
.display {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
}
.body { font-family: var(--font-body); line-height: var(--leading-body); }

/* The accent bar — Prosperus' signature device */
.accent-bar { height: 9px; width: 120px; border-radius: 5px; background: var(--clay); }

/* Syne has no italic — render italic accents upright, not faux-slanted */
html{ font-synthesis: weight; }