/* =====================================================================
   SoulCode.ai — shared brand foundation (design system port)
   Used by confirmation.html, sales.html, fieldnotes.html (and quiz/results).
   Palette, type, spacing and the "Letterpress Law" come from
   design/design-system/. This file is FRONT-END STYLING ONLY.
   ===================================================================== */

/* Fonts — all five faces on Google Fonts (brand guide §2) */
@import url('https://fonts.googleapis.com/css2?family=Marcellus&family=Inter:wght@400;500;600;700&family=Lora:ital,wght@1,400;1,500&family=Fraunces:opsz,wght@9..144,300;9..144,400&family=Playfair+Display:wght@400;500&display=swap');

/* ---------- Tokens ---------- */
:root{
  /* Foundation (Slate) */
  --slate:#2F3E4C;--slate-hi:#3B4C5C;--slate-deep:#263340;--slate-black:#1F2A35;
  /* Cool accents — precision signal */
  --ice:#7EC8BE;--teal-deep:#4E8B84;--glacier:#54748E;
  /* Warm accents — action signal */
  --gold-hi:#D9AB5C;--gold:#C99A4A;--gold-deep:#A87F35;--ochre:#7A5A22;
  /* Neutrals — light */
  --cream:#F5F0E6;--bone:#ECE7DF;--latte:#EDE8DF;
  /* Neutrals — dark */
  --ink:#332B21;--ink-soft:#6E5C48;--walnut:#4A3B26;--walnut-dark:#3A2D1C;--walnut-soft:#6B5A3E;

  /* Semantic — Dark environment (default) */
  --surface-page:var(--slate);--surface-raised:var(--slate-hi);--surface-deep:var(--slate-deep);
  --text-primary:var(--cream);--text-secondary:rgba(245,240,230,.7);--text-muted:rgba(245,240,230,.6);
  --accent-cool:var(--ice);--accent-warm:var(--gold-hi);--accent-success:var(--teal-deep);
  --cta-bg:var(--ice);--cta-text:var(--slate);

  /* Type */
  --font-display:'Marcellus',serif;    /* headlines H1–H3 */
  --font-body:'Inter',sans-serif;      /* body, buttons, UI */
  --font-accent:'Lora',serif;          /* italic asides only */
  --font-glyph:'Fraunces',serif;       /* numbers & percentages only */
  --font-quote:'Playfair Display',serif;
  --text-h1:56px;--lh-h1:1.12;
  --text-h2:34px;--lh-h2:1.2;
  --text-h3:24px;--lh-h3:1.3;
  --text-body:16px;--lh-body:1.75;
  --text-body-lg:18px;--lh-body-lg:1.6;
  --text-label:14px;--text-small:12px;
  --text-accent:20px;--lh-accent:1.5;
  --text-score:46px;

  /* Spacing / radius / letterpress */
  --space-xs:8px;--space-sm:16px;--space-md:24px;--space-lg:32px;--space-xl:48px;
  --radius:8px;
  --shadow-letterpress:inset 0 2px 6px rgba(31,42,53,.35),inset 0 -1px 0 rgba(245,240,230,.06);
  --shadow-letterpress-light:inset 0 2px 5px rgba(51,43,33,.14),inset 0 -1px 0 rgba(255,255,255,.5);
  --rule-thin:2px;--rule-accent:3px;
}

/* Light environment */
.env-light{
  --surface-page:var(--bone);--surface-raised:#FFFFFF;--surface-deep:var(--latte);
  --text-primary:var(--ink);--text-secondary:var(--ink-soft);--text-muted:rgba(51,43,33,.55);
  --accent-cool:var(--glacier);--accent-warm:var(--gold-deep);--accent-success:var(--teal-deep);
  --cta-bg:var(--glacier);--cta-text:var(--cream);
}
/* Parchment environment — warm only, NO cool accents */
.env-parchment{
  --surface-page:var(--latte);--surface-raised:var(--bone);--surface-deep:#E4DDD0;
  --text-primary:var(--walnut);--text-secondary:var(--walnut-soft);--text-muted:rgba(74,59,38,.55);
  --accent-cool:var(--ochre);--accent-warm:var(--ochre);--accent-success:var(--ochre);
  --cta-bg:var(--walnut);--cta-text:var(--latte);
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--surface-page);
  color:var(--text-primary);
  font-family:var(--font-body);
  font-size:var(--text-body-lg);
  line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:var(--accent-cool)}
a:hover{color:var(--accent-warm)}
img{max-width:100%}

/* ---------- Shared components ---------- */

/* Header / footer */
.sc-header{display:flex;align-items:center;padding:20px 32px;border-bottom:1px solid rgba(245,240,230,.08);background:var(--slate)}
.sc-logo{height:56px;width:auto;display:block}
.sc-footer{padding:32px 24px;text-align:center}
.sc-footer p{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(245,240,230,.5)}

/* Eyebrow label */
.sc-eyebrow{font-family:var(--font-body);font-size:var(--text-small);font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:var(--accent-warm)}

/* Thin warm accent rule (left-aligned by default) */
.sc-rule{width:72px;height:var(--rule-thin);background:var(--accent-warm);border:0;opacity:.7}
.sc-rule--center{margin-left:auto;margin-right:auto}

/* Buttons — 8px radius, Inter bold; no scale/bounce, ~180ms ease */
.sc-btn{
  display:inline-block;font-family:var(--font-body);font-weight:700;font-size:var(--text-label);
  letter-spacing:.02em;line-height:1;text-decoration:none;cursor:pointer;
  padding:19px 40px;border-radius:var(--radius);border:1px solid transparent;
  transition:background-color .18s ease,border-color .18s ease,color .18s ease;
}
/* primary = Ice bg + Slate text */
.sc-btn--primary{background:var(--ice);color:var(--slate);border-color:var(--ice)}
.sc-btn--primary:hover{background:var(--cream);border-color:var(--cream);color:var(--slate)}
/* secondary = Slate bg + Gold-Hi border + Cream text */
.sc-btn--secondary{background:var(--slate);color:var(--cream);border-color:var(--gold-hi)}
.sc-btn--secondary:hover{background:var(--slate-hi);color:var(--cream)}
/* gold = Gold-Hi bg + Slate text */
.sc-btn--gold{background:var(--gold-hi);color:var(--slate);border-color:var(--gold-hi)}
.sc-btn--gold:hover{background:var(--gold);border-color:var(--gold);color:var(--slate)}
.sc-btn--lg{padding:19px 44px;min-width:300px;text-align:center}
.sc-btn--block{display:block;width:100%;text-align:center}

/* Confirmation ✓ badge */
.sc-check{width:56px;height:56px;border-radius:50%;border:2px solid var(--accent-warm);display:flex;align-items:center;justify-content:center;color:var(--accent-warm);font-size:24px;line-height:1}

/* Fraunces numerals helper */
.sc-num{font-family:var(--font-glyph);font-weight:300}

@media(max-width:640px){
  body{font-size:var(--text-body)}
  .sc-header{padding:16px 22px}
  .sc-logo{height:46px}
  .sc-btn--lg{min-width:0}
  .sc-btn{width:100%;text-align:center}
}

/* Sticky corner CTA (sales page + shared) */
.sticky-cta{position:fixed;top:16px;right:16px;z-index:200;display:flex;flex-direction:column;align-items:flex-end;gap:7px;max-width:min(90vw,340px);background:var(--gold-hi);border:1px solid var(--gold-deep);border-radius:14px;padding:13px 16px;text-decoration:none;color:var(--slate);box-shadow:0 12px 34px rgba(0,0,0,.4);opacity:0;transform:translateY(-14px);pointer-events:none;transition:opacity .3s ease,transform .3s ease}
.sticky-cta.visible{opacity:1;transform:none;pointer-events:auto}
.sticky-offer{font-family:var(--font-body);font-size:13px;letter-spacing:.02em;color:var(--slate);font-weight:600;line-height:1.45;text-align:right;white-space:nowrap}
.sticky-btn{font-family:var(--font-body);font-size:14px;letter-spacing:.16em;text-transform:uppercase;background:var(--ice);color:var(--slate);padding:9px 18px;border-radius:9px;font-weight:800}
@media(max-width:680px){.sticky-cta{top:10px;right:10px;left:10px;max-width:none;flex-direction:row;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px}.sticky-offer{font-size:10px;text-align:left}.sticky-btn{flex:0 0 auto}}