/* ============================================================
   recoveryclub. — Design System Tokens
   The Recovery Club | Rick Ratcliffe | @the.recovery.club
   ============================================================ */

/* ---------- Fonts ------------------------------------------- */

@font-face {
  font-family: "Neue Haas Display";
  src: url("fonts/NeueHaasDisplayBold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Montserrat";
  src: url("fonts/Montserrat-Black.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* Google Fonts fallback for Lato — body + CTA copy. */
@import url("https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&family=Montserrat:wght@900&display=swap");

/* ---------- Tokens ------------------------------------------ */

:root {
  /* === BRAND PALETTE === */
  /* Core greys — backgrounds & ground colours */
  --rc-black:        #0D0D0D;   /* primary background — dark stories, hero */
  --rc-dark:         #1A1A1A;   /* logo background, secondary surface */
  --rc-charcoal:     #1E1E1E;   /* tertiary surface, video well */
  --rc-grey-08:      #0A0A0A;   /* darker section break */

  /* Bone / editorial light grounds */
  --rc-bone:         #EEECE6;   /* primary light background — print, editorial */
  --rc-cream:        #F5F5F0;   /* editorial carousel background */
  --rc-grey-light:   #F4F4F4;
  --rc-white:        #FFFFFF;

  /* Accents — gold for emotional / dark brand */
  --rc-gold:         #C9A84C;   /* primary content emphasis — single word, bar, rule */
  --rc-gold-light:   #F0D078;   /* hover state on gold buttons + secondary gold */

  /* Industrial accents — apparel / logo only, used sparingly */
  --rc-lime:         #B5F15A;   /* primary apparel / logo hero variant */
  --rc-teal:         #7EEAEA;   /* secondary apparel / logo variant */

  /* Neutrals on dark */
  --rc-fg:           var(--rc-white);
  --rc-fg-1:         #BBBBBB;   /* body copy on dark */
  --rc-fg-2:         #CCCCCC;   /* generic paragraph text */
  --rc-fg-3:         #888888;   /* notes, captions */
  --rc-fg-4:         #555555;   /* footer, deep mute */
  --rc-grey-mid:     #444444;

  /* Hairline borders — gold @ low opacity is the brand hairline */
  --rc-hairline:        rgba(201, 168, 76, 0.20);
  --rc-hairline-strong: rgba(201, 168, 76, 0.30);
  --rc-hairline-soft:   rgba(201, 168, 76, 0.10);
  --rc-divider-white:   rgba(255, 255, 255, 0.07);

  /* === TYPOGRAPHY — primitive families === */
  --font-display: "Neue Haas Display", "Helvetica Neue", "Liberation Sans", Arial, sans-serif;
  --font-label:   "Montserrat", "Helvetica Neue", "Liberation Sans", Arial, sans-serif;
  --font-body:    "Lato", "Helvetica Neue", Arial, sans-serif;

  /* === SEMANTIC TYPE === */
  /* Display headline — huge, white, commanding. Pair with --rc-gold for emphasis spans. */
  --type-display-font:     var(--font-display);
  --type-display-weight:   700;
  --type-display-size:     clamp(38px, 6vw, 70px);
  --type-display-lh:       1.05;
  --type-display-tracking: -0.02em;

  /* Section title — same family, slightly tighter. */
  --type-title-font:       var(--font-display);
  --type-title-weight:     700;
  --type-title-size:       clamp(28px, 4vw, 44px);
  --type-title-lh:         1.1;
  --type-title-tracking:   -0.01em;

  /* Story headline — used on dark photo backgrounds. */
  --type-story-font:       var(--font-display);
  --type-story-weight:     700;
  --type-story-size:       clamp(48px, 9vw, 96px);
  --type-story-lh:         0.95;
  --type-story-tracking:   -0.02em;

  /* Label / eyebrow / button — spaced caps, Montserrat Black. */
  --type-label-font:       var(--font-label);
  --type-label-weight:     900;
  --type-label-size:       11px;
  --type-label-tracking:   0.30em;
  --type-label-transform:  uppercase;

  /* Button text — slightly larger label. */
  --type-btn-font:         var(--font-label);
  --type-btn-weight:       900;
  --type-btn-size:         13px;
  --type-btn-tracking:     0.20em;
  --type-btn-transform:    uppercase;

  /* Body copy — light, generous line-height. */
  --type-body-font:        var(--font-body);
  --type-body-weight:      300;
  --type-body-size:        17px;
  --type-body-lh:          1.7;

  /* Lead — slightly larger body for opening paragraphs. */
  --type-lead-font:        var(--font-body);
  --type-lead-weight:      300;
  --type-lead-size:        18px;
  --type-lead-lh:          1.8;

  /* Caption / form-legal — small mute. */
  --type-caption-font:     var(--font-body);
  --type-caption-weight:   300;
  --type-caption-size:     13px;
  --type-caption-lh:       1.6;

  /* === SPACING === */
  /* Brand uses a generous, editorial rhythm. */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  28px;
  --space-7:  36px;
  --space-8:  48px;
  --space-9:  64px;
  --space-10: 80px;
  --space-11: 96px;
  --space-12: 120px;

  /* === LAYOUT === */
  --rc-content-max:    820px;   /* primary editorial column */
  --rc-content-narrow: 680px;   /* form column */
  --rc-edge:           40px;    /* page edge gutter */
  --rc-edge-mobile:    24px;

  /* === RADII — brand is hard-edged === */
  --radius-0: 0;        /* default — all primary surfaces */
  --radius-1: 2px;      /* form fields, only when needed for browsers */
  --radius-pill: 999px; /* never used on buttons; reserve for testimonial pills only */

  /* === ACCENT BARS === */
  --rule-thin:   1px;
  --rule-rail:   2px;     /* gold dividers under section titles */
  --rule-bar:    3px;     /* reality-item / quote left accent */
  --rule-bar-lg: 5px;     /* full-height story left accent */

  /* === MOTION === */
  --ease-default: cubic-bezier(0.2, 0.6, 0.2, 1);
  --dur-fast:     120ms;
  --dur-base:     200ms;
  --dur-slow:     320ms;

  /* === SHADOWS — minimal; brand favours hard edges and accent bars === */
  --shadow-none:    none;
  --shadow-overlay: 0 24px 60px rgba(0, 0, 0, 0.55);   /* used only for floating elements over photo */
  --inset-photo:    inset 0 -200px 240px rgba(13, 13, 13, 0.85); /* protection gradient for story photos */
}

/* ---------- Element defaults -------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

body.rc {
  background: var(--rc-black);
  color: var(--rc-fg);
  font-family: var(--font-body);
  font-weight: var(--type-body-weight);
  font-size:   var(--type-body-size);
  line-height: var(--type-body-lh);
  margin: 0;
  -webkit-font-smoothing: antialiased;
}

body.rc--light {
  background: var(--rc-cream);
  color: var(--rc-black);
}

/* ---------- Semantic type utilities -------------------------- */

.rc-display {
  font-family: var(--type-display-font);
  font-weight: var(--type-display-weight);
  font-size:   var(--type-display-size);
  line-height: var(--type-display-lh);
  letter-spacing: var(--type-display-tracking);
  color: var(--rc-white);
  margin: 0;
}
.rc-display em { font-style: normal; color: var(--rc-gold); }

.rc-title {
  font-family: var(--type-title-font);
  font-weight: var(--type-title-weight);
  font-size:   var(--type-title-size);
  line-height: var(--type-title-lh);
  letter-spacing: var(--type-title-tracking);
  color: var(--rc-white);
  margin: 0;
}
.rc-title em { font-style: normal; color: var(--rc-gold); }

.rc-story {
  font-family: var(--type-story-font);
  font-weight: var(--type-story-weight);
  font-size:   var(--type-story-size);
  line-height: var(--type-story-lh);
  letter-spacing: var(--type-story-tracking);
  color: var(--rc-white);
  margin: 0;
}
.rc-story em { font-style: normal; color: var(--rc-gold); }

.rc-label {
  font-family: var(--type-label-font);
  font-weight: var(--type-label-weight);
  font-size:   var(--type-label-size);
  letter-spacing: var(--type-label-tracking);
  text-transform: var(--type-label-transform);
  color: var(--rc-gold);
  margin: 0;
}

.rc-body {
  font-family: var(--type-body-font);
  font-weight: var(--type-body-weight);
  font-size:   var(--type-body-size);
  line-height: var(--type-body-lh);
  color: var(--rc-fg-2);
  margin: 0;
}

.rc-lead {
  font-family: var(--type-lead-font);
  font-weight: var(--type-lead-weight);
  font-size:   var(--type-lead-size);
  line-height: var(--type-lead-lh);
  color: var(--rc-fg-1);
  margin: 0;
}

.rc-caption {
  font-family: var(--type-caption-font);
  font-weight: var(--type-caption-weight);
  font-size:   var(--type-caption-size);
  line-height: var(--type-caption-lh);
  color: var(--rc-fg-3);
  margin: 0;
}

/* ---------- Logo wordmark utility ---------------------------- */
/* Always lowercase, always with the full stop. */

.rc-wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.03em;
  text-transform: lowercase; /* enforce — never capitalise */
  line-height: 0.9;
}
.rc-wordmark::after { content: "."; }

/* ---------- Brand divider ------------------------------------ */

.rc-rule {
  width: 40px;
  height: var(--rule-rail);
  background: var(--rc-gold);
  border: 0;
  margin: 0;
  display: block;
}

/* ---------- Surfaces ----------------------------------------- */

.rc-surface-dark   { background: var(--rc-black); color: var(--rc-fg); }
.rc-surface-darker { background: var(--rc-grey-08); color: var(--rc-fg); }
.rc-surface-card   { background: var(--rc-charcoal); color: var(--rc-fg); }
.rc-surface-cream  { background: var(--rc-cream); color: var(--rc-black); }
.rc-surface-bone   { background: var(--rc-bone); color: var(--rc-black); }