/*
Theme Name:   JourneyOM
Theme URI:    https://journeyom.life
Description:  GeneratePress child theme for JourneyOM. Holds the global design foundation (tokens, fonts, buttons) extracted from the approved Claude Design build. Section styling is layered on top via GenerateBlocks.
Author:       JourneyOM
Template:     generatepress
Version:      1.0.0
Text Domain:  journeyom
*/

/* =========================================================
   1. DESIGN TOKENS
   The single source of truth for color, spacing, motion.
   Every section references these, so a change here cascades
   site-wide. Do not hardcode hex values in section CSS,
   reference the variable instead.
   ========================================================= */
:root {
  /* Gold accent family */
  --gold:       #F7B304;
  --gold-deep:  #C2820A;
  --gold-soft:  #FBD577;

  /* Ink (dark) family, used for dark sections and the canvas */
  --ink:        #1B1611;
  --ink-2:      #241E18;
  --ink-3:      #36302A;

  /* Light family, used for cream and paper sections */
  --paper:      #FBF8F2;
  --cream:      #F4EDE1;
  --cream-2:    #EBE2D2;

  /* Neutrals for secondary text and hairlines */
  --taupe:      #8C8174;
  --taupe-2:    #B6AB9B;
  --line:       #E5DCCD;
  --line-dark:  #3A332C;

  /* Layout and motion */
  --maxw:       1200px;
  --ease:       cubic-bezier(.22,.61,.36,1);
}

/* =========================================================
   2. BASE TYPOGRAPHY
   Body is Hanken Grotesk. Display headings are Cormorant
   Garamond. The dark canvas matches the build (header and
   closing sections are dark; cream sections sit on top as
   explicit containers).
   ========================================================= */
body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4,
.font-display {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 500;
  line-height: 1.08;
}

/* Italic accent words inside display headings (the gold
   emphasis like "changes", "calling", "yourself") */
.accent-italic {
  font-style: italic;
  color: var(--gold);
}

/* =========================================================
   3. REUSABLE TEXT HELPERS
   ========================================================= */

/* Small uppercase gold label that sits above headings */
.eyebrow {
  font-size: 11.5px;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
}

/* Intro paragraph below a heading */
.lead-p {
  font-size: 19px;
  color: #cabfae;
  max-width: 54ch;
}

/* Spectral is reserved for pull quotes and editorial accents */
.font-spectral {
  font-family: 'Spectral', Georgia, serif;
}

/* =========================================================
   4. BUTTON SYSTEM
   Three variants. Sharp rectangles (no radius), uppercase,
   tracked. btn-gold for primary CTAs, btn-line for dark
   sections, btn-line-dark for light sections.
   ========================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 30px;
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  border: 0;
  transition: transform .3s var(--ease), background .3s, color .3s, box-shadow .3s;
}

.btn-gold {
  background: var(--gold);
  color: var(--ink);
}
.btn-gold:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 38px -14px rgba(247,179,4,.7);
}

.btn-line {
  background: transparent;
  border: 1px solid rgba(251,248,242,.35);
  color: var(--paper);
}
.btn-line:hover {
  border-color: var(--gold);
  color: var(--gold);
}

.btn-line-dark {
  background: transparent;
  border: 1px solid var(--ink);
  color: var(--ink);
}
.btn-line-dark:hover {
  background: var(--ink);
  color: var(--paper);
}

/* =========================================================
   5. LAYOUT HELPER
   Constrains section content to the design max width.
   ========================================================= */
.jom-container {
  width: 100%;
  max-width: var(--maxw);
  margin-left: auto;
  margin-right: auto;
}