/* ============================================================================
   PFG (Partners for Growth) brand tokens, base styles, utilities.
   Built from PFG_DESIGN_LANGUAGE.md. Neutral, architectural, spacious:
   linen + taupe + slate + charcoal, square corners, slate accent,
   orange as a sparing pop. Imported once at the app root (in base.html).
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Jost:wght@300;400;500;600;700&family=Libre+Caslon+Text:ital@0;1&display=swap');

:root {
  /* ---- brand palette ---- */
  --pfg-linen: #EFEDEA;
  --pfg-light-taupe: #D9D1CC;
  --pfg-taupe: #BAADA6;
  --pfg-lightest-slate: #CDD9DF;
  --pfg-light-slate: #96B0BD;
  --pfg-deep-slate: #4D6E82;
  --pfg-charcoal: #333333;
  --pfg-stone: #7E7F7F;
  --pfg-orange: #FF8A00;
  --pfg-white: #FFFFFF;
  --pfg-error: #B5443A;

  /* ---- semantic aliases ---- */
  --surface-page: var(--pfg-linen);
  --surface-card: var(--pfg-white);
  --surface-muted: #F4F1ED;          /* ~25% light-taupe over white */
  --surface-inverse: var(--pfg-charcoal);
  --surface-slate: var(--pfg-deep-slate);
  --text-heading: var(--pfg-charcoal);
  --text-body: var(--pfg-charcoal);
  --text-muted: var(--pfg-stone);
  --text-on-dark: var(--pfg-white);
  --accent: var(--pfg-deep-slate);
  --accent-soft: var(--pfg-light-slate);
  --accent-faint: var(--pfg-lightest-slate);
  --pop: var(--pfg-orange);
  --border-subtle: var(--pfg-light-taupe);

  /* ---- type ---- */
  --font-sans: 'Jost', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-serif: 'Libre Caslon Text', Georgia, 'Times New Roman', serif;
  --ls-eyebrow: 0.18em;
  --lh-tight: 1.08;
  --lh-relaxed: 1.65;

  /* ---- shape / effects ---- */
  --radius-sm: 2px;
  --radius-md: 4px;
  --shadow-xs: 0 1px 2px rgba(51,51,51,0.04);
  --shadow-sm: 0 1px 3px rgba(51,51,51,0.07), 0 1px 2px rgba(51,51,51,0.04);
  --shadow-md: 0 4px 12px rgba(51,51,51,0.08);
  --focus-ring: 0 0 0 3px rgba(77,110,130,0.30);
  --ease-standard: cubic-bezier(.4,0,.2,1);
}

/* ---- base ---- */
body {
  background: var(--surface-page);
  color: var(--text-body);
  font-family: var(--font-sans);
  line-height: var(--lh-relaxed);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: var(--font-sans); color: var(--text-heading); font-weight: 500; line-height: var(--lh-tight); letter-spacing: -0.01em; }
a { color: var(--accent); text-decoration: none; transition: color .16s var(--ease-standard); }
a:hover { color: var(--pfg-charcoal); }
::selection { background: var(--accent-faint); }

/* ---- utility classes ---- */
.pfg-eyebrow {
  font-size: 12px; font-weight: 500; text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow); color: var(--accent);
}
.pfg-eyebrow--pop { color: var(--pop); }
.pfg-serif-italic { font-family: var(--font-serif); font-style: italic; }
.pfg-measure { max-width: 720px; }
.pfg-section-number { font-family: var(--font-sans); font-weight: 300; color: var(--pfg-light-taupe); }

/* card / control recipes (used where Tailwind utilities aren't enough) */
.pfg-card { background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }
.pfg-btn {
  background: var(--accent); color: var(--text-on-dark); border: none; border-radius: var(--radius-sm);
  font-family: var(--font-sans); font-weight: 500; padding: 0.7rem 1.4rem; cursor: pointer;
  transition: background .16s var(--ease-standard);
}
.pfg-btn:hover { background: #3d5a6b; }
.pfg-btn:disabled { opacity: .4; cursor: not-allowed; }
.pfg-btn-secondary { background: var(--surface-card); color: var(--text-heading); border: 1px solid var(--border-subtle); }
.pfg-btn-secondary:hover { background: var(--surface-muted); }
.pfg-input, .pfg-select {
  background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm);
  color: var(--text-heading); padding: 0.5rem 0.7rem; font-family: var(--font-sans);
}
.pfg-input:focus, .pfg-select:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); }

[x-cloak] { display: none !important; }