/* =============================================================
   THE SOUL LIGHTHOUSE — Design Foundations
   Susan · Private Advisory & Strategic Foresight
   Philosophy: "Pristine Clarity & The Sanctuary of Wisdom"
   -------------------------------------------------------------
   Load this file, then the Google Fonts import below it.
   Primitive tokens describe raw values; semantic tokens map
   them to roles. Always reach for semantic tokens in product.
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Inter:wght@300;400;500;600&display=swap');

:root {
  /* ---------- PRIMITIVE · COLOR ---------------------------- */
  /* The Pristine Sanctuary (Virgo / Venus) */
  --alabaster:      #FBFBF9; /* Swiss white · the chaos stops here */
  --alabaster-pure: #FFFFFF; /* card surfaces, lifted paper */
  --cashmere:       #EAE6DF; /* warm putty · grounded section bg */
  --cashmere-deep:  #DED8CE; /* hairlines on warm grounds */

  /* Wisdom & Structure (Jupiter / Saturn) */
  --oxford:         #1C2733; /* deep oxford blue · replaces black */
  --oxford-soft:    #2B3947; /* raised oxford, hovers on dark */
  --slate:          #5A6B7C; /* analytical mind · muted text */
  --slate-light:    #8A97A3; /* faint captions, disabled */

  /* Illumination & Solution (Exalted Sun in Aries) */
  --gold:           #D4AF37; /* muted champagne gold · the solution */
  --gold-deep:      #B8962C; /* gold on light, text-safe */
  --gold-wash:      #F4ECD6; /* faintest gold tint for highlights */

  /* The Path Forward (Mercury + Jupiter) */
  --sage:           #8A9A86; /* subtle celadon · success, growth */
  --sage-deep:      #6F7E6B; /* sage text-safe */
  --sage-wash:      #EBEFE9; /* faint sage tint */

  /* Functional hairlines & overlays */
  --line:           rgba(28, 39, 51, 0.10);
  --line-soft:      rgba(28, 39, 51, 0.06);
  --line-gold:      rgba(212, 175, 55, 0.45);
  --scrim:          rgba(28, 39, 51, 0.55);

  /* ---------- PRIMITIVE · TYPEFACE ------------------------- */
  --font-display: 'Cinzel', 'Optima', 'Times New Roman', serif;
  --font-serif:   'Cormorant Garamond', 'Optima', Georgia, serif;
  --font-body:    'Inter', 'Proxima Nova', system-ui, -apple-system, sans-serif;

  /* ---------- PRIMITIVE · TYPE SCALE ----------------------- */
  --fs-display: clamp(3rem, 5.2vw, 4.5rem);   /* 48 → 72 */
  --fs-h1:      clamp(2.25rem, 3.4vw, 3rem);  /* 36 → 48 */
  --fs-h2:      clamp(1.75rem, 2.4vw, 2.25rem);
  --fs-h3:      1.5rem;    /* 24 */
  --fs-h4:      1.25rem;   /* 20 */
  --fs-lead:    1.1875rem; /* 19 · intro paragraphs */
  --fs-body:    1.0625rem; /* 17 · default reading size */
  --fs-sm:      0.9375rem; /* 15 */
  --fs-xs:      0.8125rem; /* 13 · eyebrows, captions */

  --lh-tight:   1.1;
  --lh-snug:    1.3;
  --lh-body:    1.65;  /* breathable reading */
  --lh-loose:   1.8;

  --ls-display: 0.01em;
  --ls-eyebrow: 0.22em;  /* generous tracking on uppercase labels */
  --ls-button:  0.10em;
  --ls-body:    0;

  /* ---------- PRIMITIVE · SPACE (breathable 4pt scale) ----- */
  --space-1: 0.25rem;  /* 4  */
  --space-2: 0.5rem;   /* 8  */
  --space-3: 0.75rem;  /* 12 */
  --space-4: 1rem;     /* 16 */
  --space-5: 1.5rem;   /* 24 */
  --space-6: 2rem;     /* 32 */
  --space-7: 3rem;     /* 48 */
  --space-8: 4rem;     /* 64 */
  --space-9: 6rem;     /* 96 */
  --space-10: 8rem;    /* 128 · section breathing room */

  /* ---------- PRIMITIVE · RADIUS (restrained, paper-like) -- */
  --radius-xs: 2px;   /* buttons, chips */
  --radius-sm: 4px;   /* cards, inputs */
  --radius-md: 8px;   /* media, larger panels */
  --radius-pill: 999px;

  /* ---------- PRIMITIVE · ELEVATION (soft, airy, diffuse) -- */
  --shadow-hairline: 0 1px 2px rgba(28, 39, 51, 0.04);
  --shadow-card:     0 10px 30px rgba(28, 39, 51, 0.05);
  --shadow-lift:     0 18px 48px rgba(28, 39, 51, 0.08);
  --shadow-gold:     0 4px 15px rgba(212, 175, 55, 0.30);

  /* ---------- PRIMITIVE · MOTION -------------------------- */
  --ease-calm: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast:  180ms;
  --dur-base:  300ms;
  --dur-slow:  520ms;

  /* ---------- PRIMITIVE · LAYOUT -------------------------- */
  --measure: 64ch;       /* max reading width */
  --container: 1200px;   /* page gutter container */

  /* =============================================================
     SEMANTIC TOKENS — reach for these in product code
     ============================================================= */
  --color-bg-primary:   var(--alabaster);
  --color-bg-secondary: var(--cashmere);
  --color-surface:      var(--alabaster-pure);
  --color-text-main:    var(--oxford);
  --color-text-muted:   var(--slate);
  --color-text-faint:   var(--slate-light);
  --color-accent-dawn:  var(--gold);
  --color-accent-sage:  var(--sage);
  --color-border:       var(--line);
  --color-on-dark:      var(--alabaster);
}

/* =============================================================
   SEMANTIC TYPE ROLES — apply as classes
   ============================================================= */
.t-eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--gold-deep);
}
.t-display {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: 500;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  color: var(--color-text-main);
}
.t-h1 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: 500;
  line-height: var(--lh-snug);
  color: var(--color-text-main);
}
.t-h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 400;
  line-height: var(--lh-snug);
  color: var(--color-text-main);
}
.t-h3 {
  font-family: var(--font-serif);
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: var(--lh-snug);
  color: var(--color-text-main);
}
.t-serif-quote {
  font-family: var(--font-serif);
  font-size: var(--fs-h2);
  font-weight: 400;
  font-style: italic;
  line-height: var(--lh-snug);
  color: var(--color-text-main);
}
.t-lead {
  font-family: var(--font-body);
  font-size: var(--fs-lead);
  font-weight: 300;
  line-height: var(--lh-body);
  color: var(--color-text-muted);
}
.t-body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: var(--lh-body);
  color: var(--color-text-main);
}
.t-small {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 400;
  line-height: var(--lh-snug);
  color: var(--color-text-muted);
}

/* =============================================================
   BASE RESET (optional · scope to product roots)
   ============================================================= */
.sl-root {
  background: var(--color-bg-primary);
  color: var(--color-text-main);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}