/* ============================================================
   CLIFF.GOSIPINBISNIS — COLORS & TYPE
   Brand foundations: high-contrast black & white, editorial.
   Display: ANTON (condensed, all-caps hooks)
   Body:    MONTSERRAT (clean geometric sans)
   ============================================================ */

/* ---------- WEBFONTS (self-hosted, latin subset) ---------- */
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/anton-400.woff2') format('woff2');
}
@font-face { font-family:'Montserrat'; font-style:normal; font-weight:400; font-display:swap; src:url('fonts/montserrat-400.woff2') format('woff2'); }
@font-face { font-family:'Montserrat'; font-style:normal; font-weight:500; font-display:swap; src:url('fonts/montserrat-500.woff2') format('woff2'); }
@font-face { font-family:'Montserrat'; font-style:normal; font-weight:600; font-display:swap; src:url('fonts/montserrat-600.woff2') format('woff2'); }
@font-face { font-family:'Montserrat'; font-style:normal; font-weight:700; font-display:swap; src:url('fonts/montserrat-700.woff2') format('woff2'); }
@font-face { font-family:'Montserrat'; font-style:normal; font-weight:800; font-display:swap; src:url('fonts/montserrat-800.woff2') format('woff2'); }

:root {
  /* ============ COLOR — CORE (monochrome only) ============ */
  --ink:        #0A0A0A;   /* near-black — primary text & dark bg */
  --ink-true:   #000000;   /* pure black — for max-contrast plates */
  --paper:      #FFFFFF;   /* pure white — primary surface */
  --paper-soft: #F4F4F2;   /* off-white — section bg, cards on white */

  /* ============ COLOR — GRAYSCALE RAMP ============ */
  --gray-950: #0A0A0A;
  --gray-900: #161616;
  --gray-800: #242424;
  --gray-700: #3A3A3A;
  --gray-600: #5C5C5C;
  --gray-500: #7C7C7C;
  --gray-400: #A0A0A0;
  --gray-300: #C9C9C9;
  --gray-200: #E2E2E0;
  --gray-100: #F0F0EE;

  /* ============ COLOR — SEMANTIC (theme: LIGHT) ============ */
  --bg:          var(--paper);
  --bg-elevated: var(--paper-soft);
  --fg1:         var(--ink);        /* primary text */
  --fg2:         var(--gray-600);   /* secondary text / captions */
  --fg3:         var(--gray-400);   /* tertiary / meta */
  --on-accent:   var(--paper);      /* text on black plates */
  --line:        rgba(10,10,10,.14);/* hairline borders */
  --line-strong: var(--ink);        /* bold structural rules */
  --highlight:   #0A0A0A;           /* "marker" emphasis block bg */
  --on-highlight:var(--paper);

  /* ============ TYPE — FAMILIES ============ */
  --font-display: 'Anton', 'Arial Narrow', sans-serif;
  --font-body:    'Montserrat', system-ui, -apple-system, sans-serif;

  /* ============ TYPE — WEIGHTS ============ */
  --w-regular: 400;
  --w-medium:  500;
  --w-semibold:600;
  --w-bold:    700;
  --w-black:   800;

  /* ============ TYPE — SCALE (social/editorial, large) ============ */
  --fs-hook:   112px;  /* ANTON cover hook */
  --fs-d1:     76px;   /* ANTON display 1 */
  --fs-d2:     54px;   /* ANTON display 2 */
  --fs-h1:     40px;
  --fs-h2:     30px;
  --fs-h3:     23px;
  --fs-lead:   21px;
  --fs-body:   18px;
  --fs-small:  15px;
  --fs-caption:13px;
  --fs-kicker: 13px;   /* tracked all-caps label */

  /* ============ TYPE — TRACKING / LEADING ============ */
  --ls-hook:  -0.01em;
  --ls-kicker: 0.22em;
  --ls-body:   0;
  --lh-tight:  0.92;
  --lh-snug:   1.08;
  --lh-body:   1.55;

  /* ============ RADIUS ============ */
  --r-none: 0px;
  --r-sm:   6px;
  --r-md:   12px;
  --r-lg:   20px;
  --r-pill: 999px;

  /* ============ SPACING (8pt base) ============ */
  --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;

  /* ============ ELEVATION ============ */
  --shadow-sm: 0 1px 2px rgba(10,10,10,.08);
  --shadow-md: 0 6px 20px rgba(10,10,10,.10);
  --shadow-lg: 0 18px 50px rgba(10,10,10,.16);
  --border-hair: 1px solid var(--line);
  --border-bold: 2.5px solid var(--ink);

  /* ============ MOTION ============ */
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-std: cubic-bezier(.4,0,.2,1);
  --dur-fast: 140ms;
  --dur-med:  240ms;
}

/* DARK theme: black plate, white ink. Apply to a wrapper. */
.theme-dark {
  --bg:          var(--ink-true);
  --bg-elevated: var(--gray-900);
  --fg1:         var(--paper);
  --fg2:         var(--gray-300);
  --fg3:         var(--gray-500);
  --on-accent:   var(--ink);
  --line:        rgba(255,255,255,.18);
  --line-strong: var(--paper);
  --highlight:   var(--paper);
  --on-highlight:var(--ink);
}

/* ============================================================
   SEMANTIC ELEMENT STYLES (opt-in via .gb-prose or classes)
   ============================================================ */
.gb-hook {
  font-family: var(--font-display);
  font-weight: var(--w-regular);
  font-size: var(--fs-hook);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-hook);
  text-transform: uppercase;
  color: var(--fg1);
}
.gb-d1 { font-family:var(--font-display); font-weight:400; font-size:var(--fs-d1); line-height:var(--lh-tight); text-transform:uppercase; color:var(--fg1); }
.gb-d2 { font-family:var(--font-display); font-weight:400; font-size:var(--fs-d2); line-height:var(--lh-snug);  text-transform:uppercase; color:var(--fg1); }

.gb-h1 { font-family:var(--font-body); font-weight:var(--w-black);    font-size:var(--fs-h1); line-height:1.12; color:var(--fg1); }
.gb-h2 { font-family:var(--font-body); font-weight:var(--w-bold);     font-size:var(--fs-h2); line-height:1.2;  color:var(--fg1); }
.gb-h3 { font-family:var(--font-body); font-weight:var(--w-bold);     font-size:var(--fs-h3); line-height:1.3;  color:var(--fg1); }
.gb-lead  { font-family:var(--font-body); font-weight:var(--w-medium); font-size:var(--fs-lead); line-height:1.45; color:var(--fg2); }
.gb-body  { font-family:var(--font-body); font-weight:var(--w-regular);font-size:var(--fs-body); line-height:var(--lh-body); color:var(--fg1); }
.gb-small { font-family:var(--font-body); font-weight:var(--w-medium); font-size:var(--fs-small); line-height:1.5; color:var(--fg2); }
.gb-caption{font-family:var(--font-body); font-weight:var(--w-medium); font-size:var(--fs-caption); line-height:1.4; color:var(--fg3); }

.gb-kicker {
  font-family: var(--font-body);
  font-weight: var(--w-bold);
  font-size: var(--fs-kicker);
  letter-spacing: var(--ls-kicker);
  text-transform: uppercase;
  color: var(--fg2);
}

/* Marker / highlight run — Cliff's signature emphasis */
.gb-mark {
  background: var(--highlight);
  color: var(--on-highlight);
  padding: 0.02em 0.22em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}