/* =========================================================
   BEENEM PERFORMANCE DIGITAL — Foundation tokens
   "O ponto que move tudo."
   =========================================================
   FONT NOTE: Fixel Display is bundled in /fonts (OTF, all 9 weights).
   Fixel Text is NOT yet provided — we currently fall back to Fixel
   Display for body too, which works because Fixel Display is itself
   a humanist grotesque legible at body sizes. If Fixel Text files
   are added later, register a separate @font-face block with
   font-family: 'Fixel Text' and update --font-text.
   Mono = JetBrains Mono via Google Fonts.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500&display=swap');

@font-face { font-family: 'Fixel Display'; font-weight: 100; font-style: normal; font-display: swap; src: url('fonts/FixelDisplay-Thin.otf') format('opentype'); }
@font-face { font-family: 'Fixel Display'; font-weight: 200; font-style: normal; font-display: swap; src: url('fonts/FixelDisplay-ExtraLight.otf') format('opentype'); }
@font-face { font-family: 'Fixel Display'; font-weight: 300; font-style: normal; font-display: swap; src: url('fonts/FixelDisplay-Light.otf') format('opentype'); }
@font-face { font-family: 'Fixel Display'; font-weight: 400; font-style: normal; font-display: swap; src: url('fonts/FixelDisplay-Regular.otf') format('opentype'); }
@font-face { font-family: 'Fixel Display'; font-weight: 500; font-style: normal; font-display: swap; src: url('fonts/FixelDisplay-Medium.otf') format('opentype'); }
@font-face { font-family: 'Fixel Display'; font-weight: 600; font-style: normal; font-display: swap; src: url('fonts/FixelDisplay-SemiBold.otf') format('opentype'); }
@font-face { font-family: 'Fixel Display'; font-weight: 700; font-style: normal; font-display: swap; src: url('fonts/FixelDisplay-Bold.otf') format('opentype'); }
@font-face { font-family: 'Fixel Display'; font-weight: 800; font-style: normal; font-display: swap; src: url('fonts/FixelDisplay-ExtraBold.otf') format('opentype'); }
@font-face { font-family: 'Fixel Display'; font-weight: 900; font-style: normal; font-display: swap; src: url('fonts/FixelDisplay-Black.otf') format('opentype'); }

:root {
  /* ---------- COLOR ---------- */
  /* Backgrounds */
  --bg:            #08000D;   /* near-black purple canvas */
  --surface:       #10071A;   /* cards, sections */
  --surface-2:     #0B0414;   /* alternate surface */
  --surface-3:     #130921;   /* "who it's not for" lighter band */
  --surface-hover: #1A0B28;   /* method column hover lift */

  /* Brand — purple */
  --accent:        #A100F2;            /* vivid purple */
  --accent-dark:   #6C007D;            /* deep purple */
  --accent-glow:   rgba(161, 0, 242, 0.13);
  --accent-dim:    rgba(161, 0, 242, 0.20);
  --accent-line:   rgba(161, 0, 242, 0.55);

  /* Action — lime green for CTAs */
  --cta:           #AEEA00;
  --cta-dark:      #8EC900;
  --cta-glow:      rgba(174, 234, 0, 0.15);

  /* Text */
  --fg:            #F2EDE8;             /* warm off-white */
  --fg-muted:      rgba(242, 237, 232, 0.72);
  --fg-dim:        rgba(242, 237, 232, 0.52);

  /* Borders */
  --border:        rgba(255, 255, 255, 0.10);   /* hairline */
  --border-strong: rgba(255, 255, 255, 0.22);

  /* ---------- TYPE ---------- */
  --font-display:  'Fixel Display', system-ui, sans-serif;
  --font-text:     'Fixel Display', system-ui, sans-serif;  /* Fixel Text not provided — Display falls through */
  --font-mono:     'JetBrains Mono', ui-monospace, monospace;

  /* Weights — display uses 800/900, text uses 400–600, labels 300 */
  --w-thin:    300;
  --w-regular: 400;
  --w-medium:  500;
  --w-semibold:600;
  --w-bold:    700;
  --w-black:   900;   /* full Fixel Black */

  /* Display scale (clamp for fluid hero) */
  --fs-display-xl: clamp(56px, 9vw, 128px);   /* hero headline */
  --fs-display-l:  clamp(40px, 6vw, 88px);    /* section starters */
  --fs-display-m:  clamp(32px, 4vw, 56px);    /* metric numbers */
  --fs-display-s:  28px;

  /* Text scale */
  --fs-lg:   20px;
  --fs-md:   17px;
  --fs-base: 16px;
  --fs-sm:   14px;
  --fs-xs:   12px;

  /* Labels (uppercase, tracked) */
  --tracking-label: 0.12em;
  --tracking-tight: -0.02em;
  --tracking-tighter: -0.04em;

  /* Line heights */
  --lh-display: 0.95;
  --lh-tight:   1.1;
  --lh-body:    1.55;

  /* ---------- SPACING ---------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;
  --space-11: 192px;

  /* ---------- RADIUS / SHADOW / MOTION ---------- */
  --radius-sm: 2px;       /* sharp, editorial */
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-pill: 999px;

  --shadow-card:  inset 0 1px 0 rgba(255,255,255,0.05), 0 0 0 1px var(--border);
  --shadow-glow:  0 0 120px 40px var(--accent-glow);
  --shadow-hover: 0 0 0 1px var(--accent-line), 0 12px 40px -12px rgba(161,0,242,0.25);

  --ease:        cubic-bezier(0.4, 0, 0.2, 1);    /* ease-in-out only */
  --dur-fast:    150ms;
  --dur:         200ms;
  --dur-slow:    300ms;
  --dur-reveal:  600ms;

  /* Layout */
  --container:    1200px;
  --column-text:  640px;
  --nav-h:        72px;
}

/* =========================================================
   SEMANTIC ELEMENT STYLES — apply by tag where possible
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-text);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  font-weight: var(--w-regular);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Display headline (hero, section starters) */
h1, .h-display {
  font-family: var(--font-display);
  font-weight: var(--w-black);
  font-size: var(--fs-display-xl);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-tighter);
  margin: 0;
  text-wrap: balance;
}

h2, .h-section {
  font-family: var(--font-display);
  font-weight: var(--w-black);
  font-size: var(--fs-display-l);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-tighter);
  margin: 0;
  text-wrap: balance;
}

h3, .h-sub {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: var(--fs-display-s);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0;
}

h4 {
  font-family: var(--font-text);
  font-weight: var(--w-semibold);
  font-size: var(--fs-lg);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0;
}

p, .p {
  font-family: var(--font-text);
  font-weight: var(--w-regular);
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  color: var(--fg);
  margin: 0;
  text-wrap: pretty;
}

p.muted, .text-muted { color: var(--fg-muted); }

/* Editorial pull quote — used in MANIFESTO column */
.pull-quote {
  font-family: var(--font-display);
  font-weight: var(--w-black);
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.05;
  letter-spacing: var(--tracking-tighter);
  color: var(--fg);
}

/* Label — uppercase, tracked, weight 300 */
.label, .eyebrow, small.label {
  font-family: var(--font-text);
  font-weight: var(--w-thin);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--fg-muted);
}

/* Metric — display weight, used for big numbers */
.metric {
  font-family: var(--font-display);
  font-weight: var(--w-black);
  font-size: var(--fs-display-m);
  line-height: 1;
  letter-spacing: var(--tracking-tighter);
  color: var(--fg);
}

/* Mono — for technical captions */
.mono {
  font-family: var(--font-mono);
  font-weight: var(--w-thin);
  font-size: var(--fs-sm);
  letter-spacing: 0;
  color: var(--fg-muted);
}

a {
  color: var(--fg);
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}
a:hover { color: var(--accent); }

::selection { background: var(--cta); color: #000; }