/* Good Friction — brand tokens
   Single source for colour and type. Use the semantic tokens (--gf-bg, --gf-text...)
   in layouts; the raw palette is for reference and special cases. */

/* Inter Tight and IBM Plex Mono, served from our own files (no request to Google; see font/_source/build_text_fonts.py). */
@font-face { font-family: "Inter Tight"; src: url("../fonts/InterTight-400-600.woff2") format("woff2"); font-weight: 400 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter Tight"; src: url("../fonts/InterTight-Italic-400.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../fonts/IBMPlexMono-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../fonts/IBMPlexMono-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }

/* GF Contact: our own typeface, built from the logo (see font/). */
@font-face { font-family: "GF Contact"; src: url("../fonts/GFContact-Light.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "GF Contact"; src: url("../fonts/GFContact-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "GF Contact"; src: url("../fonts/GFContact-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  /* ---- Palette ---- */
  --gf-paper:    #F4F4F2;  /* main background: soft neutral grey */
  --gf-white:    #FFFFFF;  /* cards and panels on Paper */
  --gf-bone:     #E9E9E6;  /* tinted panels, hover states */
  --gf-sand:     #D6D6D2;  /* hairlines, dividers */
  --gf-stone:    #A8A8A3;  /* secondary text on Ink */
  --gf-ash:      #787873;  /* icons, borders (not body text on Paper) */
  --gf-graphite: #5A5A57;  /* secondary text on Paper and White */
  --gf-soot:     #2A2A28;  /* raised surfaces on Ink */
  --gf-ink:      #151412;  /* text, logo, dark background */
  --gf-heat:     #FF4A1C;  /* the spark: logo, shapes, fills, headline spark word */
  --gf-ember:    #B8300A;  /* orange for small text (under 24px) on light backgrounds */
  --gf-glow:     #FFD9CB;  /* soft highlight background */

  /* ---- Semantic (light) ---- */
  --gf-bg: var(--gf-paper);
  --gf-surface: var(--gf-white);
  --gf-text: var(--gf-ink);
  --gf-text-muted: var(--gf-graphite);
  --gf-line: var(--gf-sand);
  --gf-accent: var(--gf-heat);        /* shapes, logo spark, fills */
  --gf-accent-text: var(--gf-ember);  /* small orange text: links, labels */
  --gf-spark-text: var(--gf-heat);    /* headline spark word, 24px+ (3.1 on Paper, 3.4 on White; use Ember on Bone) */

  /* ---- Type families ---- */
  --gf-font-display: "GF Contact", "Inter Tight", sans-serif;  /* our typeface: headlines, 32px+ (Bold 20px+) */
  --gf-font-text: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  --gf-font-mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;

  /* ---- Type scale (fluid: mobile → desktop) ---- */
  --gf-size-display-xl: clamp(64px, 10vw, 128px);
  --gf-size-display:    clamp(48px, 7vw, 88px);
  --gf-size-h1:         clamp(40px, 5vw, 64px);
  --gf-size-h2:         clamp(32px, 3.6vw, 44px);
  --gf-size-h3:         clamp(20px, 2vw, 24px);
  --gf-size-lead:       clamp(19px, 1.6vw, 22px);
  --gf-size-body:       17px;
  --gf-size-small:      14px;
  --gf-size-label:      12px;
}

[data-theme="dark"] {
  --gf-bg: var(--gf-ink);
  --gf-surface: var(--gf-soot);
  --gf-text: var(--gf-paper);
  --gf-text-muted: var(--gf-stone);
  --gf-line: #3A3A37;
  --gf-accent: var(--gf-heat);
  --gf-accent-text: var(--gf-heat);   /* Heat reads fine on Ink (5.5:1) */
  --gf-spark-text: var(--gf-heat);
}

/* ---- Type styles ---- */
/* GF Contact is lowercase-only with no italic: never fake bold or italic. */
.gf-display-xl, .gf-display, .gf-h1, .gf-h2 { font-synthesis: none; }
.gf-display-xl { font: 400 var(--gf-size-display-xl)/0.95 var(--gf-font-display); letter-spacing: -0.015em; }
.gf-display    { font: 400 var(--gf-size-display)/1 var(--gf-font-display); letter-spacing: -0.01em; }
.gf-h1         { font: 400 var(--gf-size-h1)/1.05 var(--gf-font-display); letter-spacing: -0.01em; }
.gf-h2         { font: 400 var(--gf-size-h2)/1.1 var(--gf-font-display); letter-spacing: -0.005em; }
.gf-h3         { font: 600 var(--gf-size-h3)/1.25 var(--gf-font-text); letter-spacing: -0.01em; }
.gf-lead       { font: 400 var(--gf-size-lead)/1.45 var(--gf-font-text); letter-spacing: -0.005em; }
.gf-body       { font: 400 var(--gf-size-body)/1.6 var(--gf-font-text); }
.gf-small      { font: 400 var(--gf-size-small)/1.5 var(--gf-font-text); }
.gf-label      { font: 500 var(--gf-size-label)/1.4 var(--gf-font-mono); letter-spacing: 0.08em; text-transform: uppercase; }
/* The spark: one word per headline in orange. */
.gf-spark      { color: var(--gf-spark-text); }
/* The logo's rings on any "oo" (use sparingly: big moments only). */
.gf-rings      { font-feature-settings: "ss01"; }