/* =============================================================
   Fight Club LI — Design Tokens
   Source of truth for color, type, spacing, radii, motion.
   Loaded by every page in the marketing site.

   Two modes share the same token names so any component can be
   dropped into either the marketing site or the in-app surface
   without rewiring colors.

   - .editorial  — warm cream paper + serif display.
                   Used by the marketing site, brand artifacts,
                   waitlist, and content pages (this site).
   - .product    — clean neutral surfaces, dense type ramp,
                   shadcn-compatible. Used inside app.fightclubli.com.

   Both inherit a shared core (brand colors, accent, radii, motion).
   ============================================================= */

/* ---------- 1. Web fonts (self-hosted at /fonts) ---------- */
@font-face {
	font-family: 'Inter';
	src: url('/fonts/Inter-Regular.ttf') format('truetype');
	font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
	font-family: 'Inter';
	src: url('/fonts/Inter-Medium.ttf') format('truetype');
	font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
	font-family: 'Inter';
	src: url('/fonts/Inter-SemiBold.ttf') format('truetype');
	font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
	font-family: 'Instrument Serif';
	src: url('/fonts/InstrumentSerif-Regular.ttf') format('truetype');
	font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
	font-family: 'Instrument Serif';
	src: url('/fonts/InstrumentSerif-Italic.ttf') format('truetype');
	font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
	font-family: 'JetBrains Mono';
	src: url('/fonts/JetBrainsMono-Regular.ttf') format('truetype');
	font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
	font-family: 'JetBrains Mono';
	src: url('/fonts/JetBrainsMono-Medium.ttf') format('truetype');
	font-weight: 500; font-style: normal; font-display: swap;
}

/* ---------- 2. Core brand tokens (mode-independent) ---------- */
:root {
	/* Brand identity colors — never reskinned per mode */
	--fc-ink:        #141414;   /* near-black for body text on light */
	--fc-paper:      #f5f3f0;   /* warm cream — the marketing canvas */
	--fc-bone:       #f0ece7;   /* surface raised on cream */
	--fc-fog:        #e0dcd6;   /* hairline borders on cream */

	--fc-canvas:     #ffffff;   /* product canvas (in-app) */
	--fc-graphite:   #1a1a1a;   /* product foreground */
	--fc-slate:      #4a4a4a;   /* product secondary text */
	--fc-mute:       #888880;   /* muted/labels */
	--fc-line:       #ececec;   /* in-product hairline */

	/* Action / signal colors */
	--fc-club:       #7a1d1d;   /* "Fight Club" oxblood — energy accent, sparing use */
	--fc-club-hot:   #b22a2a;   /* oxblood escalation (rare; reserved for emergencies) */
	--fc-flag:       #c97f1a;   /* warn / pending */
	--fc-go:         #2f7d4f;   /* success / live / verified engagement */

	/* Pink family — taken from fightclubli.com. The brand primary action.
	   `--fc-pink-hot` is the canonical hot pink (CTA fills, link color);
	   `--fc-pink-deep` is the hover/pressed and the text color used on
	   pink-soft surfaces (eg the Club button). Soft + blush are
	   editorial surfaces — never used inside the product canvas. */
	--fc-pink-hot:   #e8467c;
	--fc-pink-deep:  #c2305f;
	--fc-pink:       #f3a6bc;
	--fc-pink-soft:  #f8d7e0;   /* editorial only */
	--fc-pink-blush: #fbe9ee;   /* editorial only */

	/* Aliases — pink is the link color across both modes. */
	--fc-link:       var(--fc-pink-hot);
	--fc-link-deep:  var(--fc-pink-deep);

	/* Content tints — used for chips, callouts, plot fills */
	--fc-tint-club:  #f3e3e0;   /* oxblood wash */
	--fc-tint-flag:  #f6ead6;   /* amber wash */
	--fc-tint-go:    #dfecdf;   /* green wash */
	--fc-tint-pink:  var(--fc-pink-blush);

	/* Type families */
	--fc-font-display: 'Instrument Serif', 'Iowan Old Style', 'Apple Garamond', Georgia, serif;
	--fc-font-ui:      'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--fc-font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

	/* Radii */
	--fc-r-sm:   8px;
	--fc-r-md:   12px;
	--fc-r-lg:   16px;
	--fc-r-xl:   24px;
	--fc-r-pill: 999px;

	/* Spacing scale (matches paperclip cadence; usable in both modes) */
	--fc-s-1: .25rem;   /*  4 */
	--fc-s-2: .5rem;    /*  8 */
	--fc-s-3: .75rem;   /* 12 */
	--fc-s-4: 1rem;     /* 16 */
	--fc-s-5: 1.5rem;   /* 24 */
	--fc-s-6: 2rem;     /* 32 */
	--fc-s-7: 3rem;     /* 48 */
	--fc-s-8: 4rem;     /* 64 */
	--fc-s-9: clamp(5rem, 3rem + 5vw, 8rem);

	/* Container width */
	--fc-max:  1140px;

	/* Shadows — both modes use the same elevation model, soft + earthy */
	--fc-shadow-xs: 0 1px 2px rgba(20, 20, 20, .06);
	--fc-shadow-sm: 0 1px 3px rgba(20, 20, 20, .08), 0 1px 2px rgba(20, 20, 20, .04);
	--fc-shadow-md: 0 4px 12px rgba(20, 20, 20, .08), 0 2px 4px rgba(20, 20, 20, .04);
	--fc-shadow-lg: 0 12px 32px rgba(20, 20, 20, .10), 0 4px 8px rgba(20, 20, 20, .04);

	/* Motion */
	--fc-ease:     cubic-bezier(.22, 1, .36, 1);
	--fc-ease-in:  cubic-bezier(.4, 0, 1, 1);
	--fc-d-fast:   140ms;
	--fc-d-base:   220ms;
	--fc-d-slow:   420ms;
}

/* ---------- 3. Mode: editorial (marketing / fightclubli.com) ----------
   Warm paper background, serif display, JetBrains mono for tactical
   labels. This is the public face of the brand. */
.editorial,
:root.editorial {
	--bg:            var(--fc-paper);
	--bg-alt:        var(--fc-bone);
	--surface:       #ffffff;
	--surface-raised:var(--fc-bone);
	--border:        var(--fc-fog);
	--hairline:      rgba(20,20,20,.08);

	--text:          var(--fc-ink);
	--text-2:        #3a3a3a;
	--text-mute:     #7a766f;

	--accent:        var(--fc-club);
	--accent-hot:    var(--fc-club-hot);
	--link:          var(--fc-link);
	--link-deep:     var(--fc-link-deep);

	--display-font:  var(--fc-font-display);
	--display-tracking: -.012em;
	--display-leading:  1.04;

	--ui-font:       var(--fc-font-ui);
	--mono-font:     var(--fc-font-mono);
}

/* Paint the page surface only on the root/body — never on arbitrary
   .editorial descendants (eg a heading variant like <h2 class="editorial">). */
:root.editorial,
body.editorial {
	font-family: var(--ui-font);
	background: var(--bg);
	color: var(--text);
}

/* ---------- 4. Mode: product (app.fightclubli.com) ----------
   Whites and crisp neutrals, denser type, shadcn-compatible.
   Inter throughout; serif used only for empty-state moments and
   ceremony (eg "you've been verified"). */
.product,
:root.product {
	--bg:            var(--fc-canvas);
	--bg-alt:        #fafaf9;
	--surface:       #ffffff;
	--surface-raised:#ffffff;
	--border:        var(--fc-line);
	--hairline:      rgba(20,20,20,.06);

	--text:          var(--fc-graphite);
	--text-2:        var(--fc-slate);
	--text-mute:     var(--fc-mute);

	--accent:        var(--fc-link);     /* product leans on brand pink, not oxblood */
	--accent-hot:    var(--fc-link-deep);
	--link:          var(--fc-link);
	--link-deep:     var(--fc-link-deep);

	--display-font:  var(--fc-font-ui);  /* product display = tight Inter */
	--display-tracking: -.022em;
	--display-leading:  1.12;

	--ui-font:       var(--fc-font-ui);
	--mono-font:     var(--fc-font-mono);
}

/* Paint the page surface only on the root/body — never on arbitrary
   .product descendants. */
:root.product,
body.product {
	font-family: var(--ui-font);
	background: var(--bg);
	color: var(--text);
}

/* ---------- 5. Type ramp (mode-aware) ----------
   Marketing leans on the serif at large sizes; product uses tight
   Inter. Everything below `display` is shared. */
.t-eyebrow {
	font-family: var(--mono-font);
	font-weight: 500;
	font-size: 12px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--text-mute);
}

.t-display-xl { font-family: var(--display-font); font-weight: 400; font-size: clamp(3.25rem, 1.6rem + 5vw, 6rem); line-height: var(--display-leading); letter-spacing: var(--display-tracking); }
.t-display    { font-family: var(--display-font); font-weight: 400; font-size: clamp(2.25rem, 1.4rem + 3vw, 4rem);  line-height: var(--display-leading); letter-spacing: var(--display-tracking); }
.t-h1         { font-family: var(--display-font); font-weight: 400; font-size: clamp(1.875rem, 1.2rem + 2vw, 2.75rem); line-height: 1.1;  letter-spacing: -.01em; }
.t-h2         { font-family: var(--display-font); font-weight: 400; font-size: 2rem; line-height: 1.15; letter-spacing: -.005em; }
.t-h3         { font-family: var(--ui-font); font-weight: 600; font-size: 1.25rem; line-height: 1.3; letter-spacing: -.01em; }
.t-h4         { font-family: var(--ui-font); font-weight: 600; font-size: 1.0625rem; line-height: 1.35; }

.t-lede       { font-family: var(--ui-font); font-weight: 400; font-size: 1.125rem; line-height: 1.55; color: var(--text-2); }
.t-body       { font-family: var(--ui-font); font-weight: 400; font-size: .9375rem; line-height: 1.6; }
.t-small      { font-family: var(--ui-font); font-weight: 400; font-size: .8125rem; line-height: 1.5; color: var(--text-2); }
.t-mono       { font-family: var(--mono-font); font-weight: 400; font-size: .8125rem; letter-spacing: 0; }
.t-mono-tag   { font-family: var(--mono-font); font-weight: 500; font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-mute); }

/* ---------- 6. Tiny utilities used across the kit ---------- */
.fc-rule       { height: 1px; background: var(--border); border: 0; }
.fc-rule-thick { height: 2px; background: var(--text); border: 0; }

.fc-chip {
	display: inline-flex; align-items: center; gap: .4em;
	font-family: var(--mono-font); font-weight: 500;
	font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase;
	padding: .35em .8em;
	background: var(--bg-alt);
	border: 1px solid var(--border);
	border-radius: var(--fc-r-pill);
	color: var(--text-2);
}

/* Club chip — soft pink fill, deep pink text. Editorial only. */
.fc-chip-club {
	background: var(--fc-pink-soft);
	border-color: var(--fc-pink);
	color: var(--fc-pink-deep);
}

/* Live/scoreboard chip — green pulse, both modes. Mono uppercase label. */
.fc-chip-live {
	background: var(--fc-go);
	color: #fff;
	border-color: transparent;
}
.fc-chip-live::before {
	content: ""; width: 6px; height: 6px; border-radius: 50%;
	background: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,.3);
	animation: fc-pulse 1.6s ease-in-out infinite;
}
@keyframes fc-pulse {
	0%, 100% { opacity: 1; }
	50%      { opacity: .35; }
}

/* ---------- 7. Base reset + selection ---------- */
*, *::before, *::after { box-sizing: border-box; }

::selection { background: var(--fc-pink-blush); color: var(--fc-pink-deep); }