/* =====================================================================
   Corporate Rebels Summit 2026 — Foundations
   Colors, type scales, spacing, and semantic tokens.
   ===================================================================== */

/* ---------- Webfonts (Google Fonts substitutions flagged below) ------- */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Oswald:wght@500;600;700&family=Poppins:wght@400;500;600;700&family=Roboto:wght@300;400&family=Permanent+Marker&display=swap');

/* SUBSTITUTION NOTES (please supply licensed files for production):
   - Display face: spec calls for Druk Wide / Druk Condensed / ITC Franklin
     Gothic Compressed / Bagoss Standard. Substituted with Oswald (700) as
     the closest free condensed brutalist match. NOT a final replacement.
   - Bebas Neue, Poppins, Roboto Light, Permanent Marker are Google Fonts
     and match the parent brand spec exactly. */

:root {
  /* ---------- Color: Primary canvas + cards ---------- */
  --noir:        #000000;       /* dominant canvas */
  --bone:        #F4EFE6;       /* cream card */
  --pure-white:  #FFFFFF;       /* type on black only */

  /* ---------- Color: Accent (use SPARINGLY — one moment per composition) */
  --rebel-red:   #CC2200;

  /* ---------- Color: Functional / supporting (digital UI only) ---------- */
  --grey:        #F4F5F7;
  --grey-line:   #E4E5E8;       /* hairline borders */
  --grey-ink:    #6B6E74;       /* secondary text on cream */

  /* ---------- Semantic surface tokens ---------- */
  --canvas:      var(--noir);
  --card:        var(--bone);
  --ink-on-card: var(--noir);
  --ink-on-canvas: var(--pure-white);
  --ink-muted:   var(--grey-ink);
  --accent:      var(--rebel-red);
  --hairline:    rgba(0,0,0,0.12);
  --hairline-on-dark: rgba(244,239,230,0.18);

  /* ---------- Typography: Families ---------- */
  --font-display:   'Oswald', 'Druk Wide', 'Franklin Gothic Compressed', 'Bagoss Standard', 'Impact', sans-serif;
  --font-header:    'Poppins', 'Helvetica Neue', Arial, sans-serif;
  --font-body:      'Roboto', 'Helvetica Neue', Arial, sans-serif;
  --font-hand:      'Permanent Marker', 'Marker Felt', cursive;
  --font-wordmark:  'Bebas Neue', 'Oswald', Impact, sans-serif;

  /* ---------- Typography: Tracking ---------- */
  --track-display:  -0.02em;    /* tight */
  --track-eyebrow:  0.06em;     /* uppercase eyebrow */
  --track-body:     0.03em;     /* CR brand book spec: 3% */
  --track-caption:  0.08em;

  /* ---------- Typography: Line height ---------- */
  --lh-display:     0.9;
  --lh-header:      1.15;
  --lh-body:        1.3;        /* CR brand book spec */

  /* ---------- Typography: Sizes (card-scale, points read as px in browser) */
  --t-eyebrow:      11px;
  --t-caption:      9px;
  --t-body:         14px;
  --t-body-lg:      16px;
  --t-subtitle:     18px;
  --t-h3:           28px;
  --t-h2:           40px;
  --t-h1:           56px;
  --t-display:      72px;
  --t-display-xl:   120px;
  --t-display-xxl:  200px;

  /* ---------- Spacing (8pt grid, with editorial-card breathing room) ----- */
  --s-1:   4px;
  --s-2:   8px;
  --s-3:   12px;
  --s-4:   16px;
  --s-5:   24px;
  --s-6:   32px;
  --s-7:   48px;
  --s-8:   64px;
  --s-9:   96px;
  --s-10: 128px;

  /* Card internal padding — let the message breathe */
  --card-pad-sm: 24px;
  --card-pad-md: 40px;
  --card-pad-lg: 64px;

  /* ---------- Radii (sharp corners, always) ---------- */
  --r-0: 0;
  --r-sm: 0;          /* hard rule: corners are always sharp */
  --r-pill: 999px;    /* allowed only for tag/pill chips in digital UI */

  /* ---------- Shadows (used sparingly; cards float, but quietly) -------- */
  --shadow-card:   0 24px 60px -20px rgba(0,0,0,0.6),
                   0 6px 18px -8px rgba(0,0,0,0.4);
  --shadow-card-tilt: 0 30px 80px -24px rgba(0,0,0,0.7);
  --shadow-inset-hairline: inset 0 0 0 1px rgba(0,0,0,0.06);

  /* ---------- Motion ---------- */
  --ease-out:   cubic-bezier(.2,.7,.2,1);
  --ease-in:    cubic-bezier(.7,.0,.84,.0);
  --ease-snap:  cubic-bezier(.6,-0.05,.2,1.2);
  --dur-fast:   140ms;
  --dur-base:   240ms;
  --dur-slow:   480ms;
}

/* =====================================================================
   Semantic element styles — usable directly via class or tag selectors
   ===================================================================== */

.cr-canvas {
  background: var(--canvas);
  color: var(--ink-on-canvas);
  min-height: 100vh;
  font-family: var(--font-body);
  font-weight: 300;
  letter-spacing: var(--track-body);
  line-height: var(--lh-body);
}

.cr-card {
  background: var(--card);
  color: var(--ink-on-card);
  padding: var(--card-pad-md);
  border-radius: var(--r-0);
  box-shadow: var(--shadow-card);
  position: relative;
}

/* ---------- Display headlines (poster / hero) ---------- */
.cr-display, h1.cr {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--track-display);
  line-height: var(--lh-display);
  font-size: var(--t-display);
  font-stretch: condensed;
}

.cr-display--xxl { font-size: clamp(96px, 14vw, 200px); }
.cr-display--xl  { font-size: clamp(72px, 10vw, 120px); }
.cr-display--lg  { font-size: var(--t-display); }
.cr-display--md  { font-size: var(--t-h1); }

/* ---------- Header (CR continuity) ---------- */
.cr-header, h2.cr, h3.cr {
  font-family: var(--font-header);
  font-weight: 600;
  letter-spacing: 0;
  line-height: var(--lh-header);
}
h2.cr { font-size: var(--t-h2); }
h3.cr { font-size: var(--t-h3); }

.cr-subtitle {
  font-family: var(--font-header);
  font-weight: 600;
  font-size: var(--t-subtitle);
  line-height: 1.3;
}

/* ---------- Body ---------- */
.cr-body, p.cr {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--t-body);
  letter-spacing: var(--track-body);
  line-height: var(--lh-body);
  text-wrap: pretty;
}
.cr-body--lg { font-size: var(--t-body-lg); }

/* ---------- Eyebrow / metadata / caption ---------- */
.cr-eyebrow {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--t-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--track-eyebrow);
}
.cr-caption {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--t-caption);
  text-transform: uppercase;
  letter-spacing: var(--track-caption);
}

/* ---------- Wordmark ---------- */
.cr-wordmark {
  font-family: var(--font-wordmark);
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* ---------- Hand-drawn marker accent ---------- */
.cr-hand {
  font-family: var(--font-hand);
  color: var(--accent);
  font-weight: 400;
}

/* ---------- The red word: highlight a single word in body copy ---------- */
.cr-redword { color: var(--accent); }

/* ---------- Functional uppercase tags (corner labels) ---------- */
.cr-tag {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

/* ---------- Date stamp (top-right of cards) ---------- */
.cr-datestamp {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  position: absolute;
  top: var(--card-pad-sm);
  right: var(--card-pad-sm);
}

/* ---------- Buttons ---------- */
.cr-btn {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 14px;
  padding: 14px 22px;
  border: 1.5px solid currentColor;
  background: transparent;
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: background var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out);
  border-radius: 0;
}
.cr-btn:hover { background: currentColor; }
.cr-btn:hover > * { color: var(--card); }
.cr-btn--solid {
  background: var(--noir);
  color: var(--bone);
  border-color: var(--noir);
}
.cr-btn--solid:hover { background: var(--accent); border-color: var(--accent); }
.cr-btn--accent {
  background: var(--accent);
  color: var(--pure-white);
  border-color: var(--accent);
}
.cr-btn--accent:hover { background: var(--noir); border-color: var(--noir); }
.cr-btn:active { transform: translateY(1px); }

/* ---------- Form fields ---------- */
.cr-field {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--t-body);
  letter-spacing: var(--track-body);
  padding: 14px 16px;
  background: var(--grey);
  border: 1px solid var(--grey-line);
  border-radius: 0;
  color: var(--ink-on-card);
  width: 100%;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.cr-field:focus { outline: none; border-color: var(--noir); }
.cr-field--on-canvas {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--hairline-on-dark);
  color: var(--ink-on-canvas);
  padding: 14px 0;
}
.cr-field--on-canvas:focus { border-bottom-color: var(--accent); }

/* ---------- Brush stroke divider (CR continuity) ---------- */
.cr-rule {
  height: 2px;
  background: currentColor;
  border: 0;
  margin: var(--s-5) 0;
}

/* ---------- Marker scribble underline / circle helpers ---------- */
.cr-mark-underline {
  background-image: linear-gradient(transparent 80%, var(--accent) 80%);
  padding: 0 2px;
}