/* ============================================================
   BLK SQRL — Colors & Type
   DC-based streetwear brand. Black, white, and a hero red.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;700&display=swap');

:root {
  /* ---- Core palette ---------------------------------------- */
  --blk: #0A0A0A;           /* "BLK" — near-black, the brand foundation */
  --blk-true: #000000;      /* For logo lockups and stickers */
  --wht: #FFFFFF;
  --cream: #F5F1E8;         /* Sticker/paper offwhite */

  /* Red — NOT a brand color. Reserved for UI accent only:
     destructive actions, sale tags, the press flash on primary buttons.
     Never use as a primary surface or brand expression. */
  --red: #CA1627;
  --red-deep: #9E0F1E;
  --red-soft: #E84957;

  /* Neutrals — warm-cool blend, ink-on-newsprint feel */
  --ink-900: #0A0A0A;
  --ink-800: #1A1A1A;
  --ink-700: #2E2E2E;
  --ink-500: #6B6B6B;
  --ink-400: #9A9A9A;
  --ink-300: #C9C9C9;
  --ink-200: #E5E3DE;
  --ink-100: #F2F0EA;       /* slightly warm, paper-leaning */
  --ink-50:  #FAF8F3;

  /* ---- Semantic foreground -------------------------------- */
  --fg-1: var(--ink-900);   /* default text */
  --fg-2: var(--ink-700);   /* secondary text */
  --fg-3: var(--ink-500);   /* meta, labels */
  --fg-mute: var(--ink-400);
  --fg-inverse: var(--wht);
  --fg-accent: var(--blk);

  /* ---- Semantic background -------------------------------- */
  --bg-1: var(--wht);
  --bg-2: var(--ink-50);
  --bg-3: var(--ink-100);
  --bg-inverse: var(--blk);
  --bg-accent: var(--cream);

  /* ---- Borders / dividers --------------------------------- */
  --border-1: var(--ink-200);
  --border-2: var(--ink-300);
  --border-strong: var(--blk);   /* the brand loves a hard 1-2px black hairline */

  /* ---- Type families --------------------------------------
     Display: Hanken Grotesk — friendly bold grotesque, rounder than
     a geometric like Archivo Black. Closer match to the BLK SQRL®
     wordmark's softer letterforms. Substituted from Google Fonts;
     proprietary brand face pending. See fonts/README.md. */
  --font-display: 'Hanken Grotesk', 'Inter', -apple-system, system-ui, sans-serif;
  --font-body: 'Hanken Grotesk', 'Inter', -apple-system, 'Helvetica Neue', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, monospace;

  /* ---- Type scale (heavy condensed top, clean body) ------- */
  --fs-display-xl: 96px;
  --fs-display-lg: 72px;
  --fs-display-md: 56px;
  --fs-h1: 44px;
  --fs-h2: 32px;
  --fs-h3: 24px;
  --fs-h4: 20px;
  --fs-body-lg: 18px;
  --fs-body: 16px;
  --fs-body-sm: 14px;
  --fs-micro: 12px;
  --fs-eyebrow: 11px;       /* uppercase labels */

  /* Letterspacing — brand uses TIGHT display (-1%), OPEN eyebrows */
  --tracking-display: -0.01em;
  --tracking-tight: -0.005em;
  --tracking-normal: 0em;
  --tracking-wide: 0.08em;
  --tracking-eyebrow: 0.14em;

  /* ---- Spacing scale (4px base) --------------------------- */
  --sp-0: 0;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --sp-10: 128px;

  /* ---- Radii — boxy, very subtle rounding ----------------- */
  --r-none: 0;
  --r-1: 2px;
  --r-2: 4px;
  --r-3: 8px;          /* max for buttons / cards */
  --r-pill: 999px;     /* tags only */

  /* ---- Shadows — flat hard offset, no soft glows ---------- */
  --shadow-flat: 4px 4px 0 0 var(--blk);
  --shadow-flat-lg: 6px 6px 0 0 var(--blk);
  --shadow-sticker: 0 2px 8px rgba(0,0,0,0.18);   /* die-cut sticker lift */
  --shadow-card: 0 1px 0 rgba(0,0,0,0.08), 0 8px 24px -8px rgba(0,0,0,0.12);
}

/* ============================================================
   Semantic typography utilities
   ============================================================ */

.display-xl,
.display-lg,
.display-md,
.brand-mark,
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 800;            /* ExtraBold — dropped from 900/Black */
  letter-spacing: var(--tracking-display);
  line-height: 1.0;
  color: var(--fg-1);
  text-transform: uppercase;
}

.display-xl { font-size: var(--fs-display-xl); }
.display-lg { font-size: var(--fs-display-lg); }
.display-md { font-size: var(--fs-display-md); }

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); letter-spacing: var(--tracking-tight); }
h4 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-h4);
  letter-spacing: var(--tracking-tight);
  line-height: 1.2;
}

body, p, .body, .body-lg, .body-sm {
  font-family: var(--font-body);
  color: var(--fg-1);
  line-height: 1.5;
}
.body-lg { font-size: var(--fs-body-lg); line-height: 1.55; }
.body    { font-size: var(--fs-body); }
.body-sm { font-size: var(--fs-body-sm); line-height: 1.45; }
.micro   { font-size: var(--fs-micro); color: var(--fg-3); }

.eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-2);
}

code, kbd, samp, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
}