/* ============================================================
   Vibe Your Website — Colors & Type Foundations
   ============================================================
   The single source of truth for color tokens, type tokens,
   spacing, radii, shadows, and base semantic styles.
   Import this at the top of every artifact in the brand.
   ============================================================ */

/* ---- Webfonts (Google Fonts) ----
   Loaded via wp_enqueue_style( 'vibe-fonts', ... ) in inc/enqueue.php
   instead of a blocking @import here — parallel download, faster FCP. */

:root {
  /* ============================================================
     COLOR — RAW TOKENS
     ============================================================ */

  /* Surfaces — the two base surfaces of the brand */
  --ink:         #0B0B0E;   /* primary dark surface, near-black with warm tint */
  --ink-2:       #16161B;   /* raised dark surface (card on ink) */
  --ink-3:       #21212A;   /* highest dark surface (hover, input) */
  --paper:       #F4EFE6;   /* primary light surface, warm cream */
  --paper-2:     #EDE7DA;   /* raised cream surface */
  --paper-3:     #E3DBCB;   /* highest cream surface */

  /* Foreground / neutrals on dark */
  --fg1:         #F4EFE6;   /* primary text on ink */
  --fg2:         #BDB7AC;   /* secondary text on ink */
  --fg3:         #80796E;   /* tertiary / meta on ink */
  --fg4:         #4A4640;   /* disabled on ink */

  /* Foreground / neutrals on cream */
  --on-paper-1:  #0B0B0E;   /* primary text on cream */
  --on-paper-2:  #2E2A24;   /* secondary text on cream */
  --on-paper-3:  #5D574C;   /* tertiary / meta on cream */
  --on-paper-4:  #A89F90;   /* disabled on cream */

  /* Borders */
  --border-ink:    #2A2A30; /* default border on ink surfaces */
  --border-ink-2:  #3A3A44; /* stronger border on ink */
  --border-paper:  #0B0B0E; /* default border on paper (it's the ink color — chunky pen feel) */
  --border-paper-2:#2A241C; /* softer border on paper */

  /* SIGNATURE — Acid Lime
     Use sparingly. One focal element per view. */
  --lime:        #C8FF3D;
  --lime-2:      #B8F02E;   /* hover */
  --lime-3:      #94C71F;   /* pressed */
  --lime-ink:    #182A00;   /* readable text on lime */

  /* Secondary punches — used ONE at a time, alongside lime */
  --magenta:     #FF2E88;
  --magenta-2:   #E51A75;
  --magenta-fg:  #FFFFFF;

  --blue:        #3D7FFF;
  --blue-2:      #2666E5;
  --blue-fg:     #FFFFFF;

  --amber:       #FFB020;
  --amber-2:     #E89A0A;
  --amber-fg:    #2A1F00;

  /* Status / semantic */
  --success:     #41D67C;
  --success-bg:  #0F2A1A;
  --danger:      #FF4848;
  --danger-bg:   #2A0F0F;
  --info:        #3D7FFF;
  --info-bg:     #0F1A2A;
  --warn:        #FFB020;
  --warn-bg:     #2A1F0A;

  /* Tool category accents (one per major AI tool covered) */
  --tool-claude:   #D97757;
  --tool-cursor:   #FFFFFF;
  --tool-v0:       #FFFFFF;
  --tool-lovable:  #FF66A3;
  --tool-bolt:     #1AA3FF;
  --tool-replit:   #F26207;
  --tool-windsurf: #00C4B4;

  /* ============================================================
     TYPE — RAW TOKENS
     ============================================================ */
  --font-display: 'Bricolage Grotesque', ui-sans-serif, system-ui, sans-serif;
  --font-body:    'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Scale — modular, generous on display */
  --fs-display-2xl: clamp(64px, 8vw, 128px);
  --fs-display-xl:  clamp(48px, 6.5vw, 96px);
  --fs-display-l:   clamp(40px, 5vw, 72px);
  --fs-display-m:   clamp(32px, 4vw, 56px);
  --fs-h1:          clamp(28px, 3.2vw, 44px);
  --fs-h2:          clamp(22px, 2.4vw, 32px);
  --fs-h3:          20px;
  --fs-h4:          18px;
  --fs-body-l:      19px;
  --fs-body:        17px;
  --fs-body-s:      14px;
  --fs-meta:        13px;
  --fs-micro:       11px;

  /* Line heights */
  --lh-display: 0.96;
  --lh-heading: 1.08;
  --lh-body:    1.5;
  --lh-tight:   1.2;

  /* Letter spacing */
  --ls-display: -0.03em;
  --ls-heading: -0.02em;
  --ls-body:    -0.005em;
  --ls-mono-eyebrow: 0.12em;

  /* ============================================================
     SPACING — 8px baseline grid
     ============================================================ */
  --space-0:   0px;
  --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;

  /* ============================================================
     RADIUS
     ============================================================ */
  --radius-xs:  6px;
  --radius-s:  12px;   /* buttons, inputs */
  --radius-m:  16px;   /* images, video thumbs */
  --radius-l:  20px;   /* cards */
  --radius-xl: 28px;   /* hero containers */
  --radius-pill: 999px;

  /* ============================================================
     BORDERS — chunky, intentional
     ============================================================ */
  --bw:        1.5px;        /* default border width */
  --bw-2:      2px;          /* thicker for emphasis */
  --bw-3:      3px;          /* poster-weight, rare */

  /* ============================================================
     SHADOWS — hard offset, sticker-style. No soft drops.
     ============================================================ */
  --shadow-sticker-sm: 3px 3px 0 0 var(--border-paper);
  --shadow-sticker:    4px 4px 0 0 var(--border-paper);
  --shadow-sticker-lg: 6px 6px 0 0 var(--border-paper);
  --shadow-sticker-ink:    4px 4px 0 0 var(--lime);
  --shadow-sticker-ink-lg: 6px 6px 0 0 var(--lime);

  /* Subtle inner shadow for inputs only */
  --shadow-inset-input: inset 0 1px 0 rgba(0,0,0,0.06);

  /* ============================================================
     MOTION
     ============================================================ */
  --ease-snap:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
  --dur-quick: 180ms;
  --dur-base:  240ms;
  --dur-slow:  420ms;

  /* ============================================================
     LAYOUT
     ============================================================ */
  --maxw-content: 1280px;
  --maxw-prose:    860px;
  --maxw-narrow:   560px;

  /* ============================================================
     GRAIN — utility variable for the noise overlay opacity
     ============================================================ */
  --grain-opacity-ink:   0.06;
  --grain-opacity-paper: 0.04;
}

/* ============================================================
   SEMANTIC ROLES — what to grab when designing
   ============================================================ */
:root {
  --bg:        var(--ink);
  --bg-raised: var(--ink-2);
  --bg-high:   var(--ink-3);
  --text:      var(--fg1);
  --text-muted:var(--fg2);
  --text-meta: var(--fg3);
  --border:    var(--border-ink);
  --accent:    var(--lime);
  --accent-fg: var(--lime-ink);
}

/* Cream-surface override — wrap a section in `.surface-paper` */
.surface-paper {
  --bg:        var(--paper);
  --bg-raised: var(--paper-2);
  --bg-high:   var(--paper-3);
  --text:      var(--on-paper-1);
  --text-muted:var(--on-paper-2);
  --text-meta: var(--on-paper-3);
  --border:    var(--border-paper);
  background: var(--bg);
  color: var(--text);
}

/* ============================================================
   BASE ELEMENTS — semantic defaults
   ============================================================ */

html, body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Display + headings use Bricolage, tight tracking, dense leading */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: var(--ls-heading);
  line-height: var(--lh-heading);
  margin: 0;
  text-wrap: balance;
}

h1, .h1 {
  font-size: var(--fs-h1);
  font-weight: 800;
  letter-spacing: var(--ls-display);
  line-height: var(--lh-display);
}
h2, .h2 { font-size: var(--fs-h2); font-weight: 700; }
h3, .h3 { font-size: var(--fs-h3); font-weight: 600; }
h4, .h4 { font-size: var(--fs-h4); font-weight: 600; }

.display-2xl { font-family: var(--font-display); font-size: var(--fs-display-2xl); font-weight: 800; letter-spacing: var(--ls-display); line-height: var(--lh-display); }
.display-xl  { font-family: var(--font-display); font-size: var(--fs-display-xl);  font-weight: 800; letter-spacing: var(--ls-display); line-height: var(--lh-display); }
.display-l   { font-family: var(--font-display); font-size: var(--fs-display-l);   font-weight: 800; letter-spacing: var(--ls-display); line-height: var(--lh-display); }
.display-m   { font-family: var(--font-display); font-size: var(--fs-display-m);   font-weight: 700; letter-spacing: var(--ls-heading); line-height: var(--lh-heading); }

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

.body-l { font-size: var(--fs-body-l); }
.body-s { font-size: var(--fs-body-s); }
.meta   { font-size: var(--fs-meta); color: var(--text-meta); }

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: var(--ls-mono-eyebrow);
  text-transform: uppercase;
  color: var(--text-meta);
  font-weight: 500;
}

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

/* Inline code on either surface */
:not(pre) > code {
  background: color-mix(in oklch, var(--accent) 18%, transparent);
  color: var(--text);
  padding: 1px 6px;
  border-radius: 6px;
  font-size: 0.88em;
}

pre, .codeblock {
  font-family: var(--font-mono);
  background: var(--ink-2);
  color: var(--fg1);
  border: var(--bw) solid var(--border-ink);
  border-radius: var(--radius-s);
  padding: var(--space-4) var(--space-5);
  overflow-x: auto;
  font-size: var(--fs-body-s);
  line-height: 1.55;
}

a {
  color: inherit;
  text-decoration: none;
  border-bottom: var(--bw) solid currentColor;
  transition: color var(--dur-quick) var(--ease-snap), border-color var(--dur-quick) var(--ease-snap);
}
a:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* ============================================================
   MARKER HIGHLIGHT — the signature treatment.
   Wrap a word in <mark> to highlight it. Up to one per headline.
   ============================================================ */
mark {
  background: var(--lime);
  color: var(--lime-ink);
  padding: 0.02em 0.18em 0.06em;
  display: inline-block;
  transform: rotate(-1.5deg);
  margin: 0 0.04em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  border-radius: 4px;
}

/* ============================================================
   GRAIN OVERLAY — apply to any element with .grain on top of it.
   Uses an inline SVG to avoid any external dependencies.
   ============================================================ */
.grain { position: relative; }
.grain::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: overlay;
  opacity: var(--grain-opacity-ink);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 220px 220px;
}
.surface-paper .grain::after { opacity: var(--grain-opacity-paper); mix-blend-mode: multiply; }

/* ============================================================
   STICKER PILL — category tag, badge, status indicator
   ============================================================ */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  border: var(--bw) solid currentColor;
  background: transparent;
  line-height: 1.4;
  white-space: nowrap;
  transform: rotate(-1.5deg);
}
.pill.straight { transform: none; }
.pill--lime  { color: var(--lime);   background: color-mix(in oklch, var(--lime) 12%, transparent); }
.pill--mag   { color: var(--magenta);background: color-mix(in oklch, var(--magenta) 12%, transparent); }
.pill--blue  { color: var(--blue);   background: color-mix(in oklch, var(--blue) 12%, transparent); }
.pill--amber { color: var(--amber);  background: color-mix(in oklch, var(--amber) 14%, transparent); }
.pill--ink   { color: var(--ink); background: var(--paper); }

/* ============================================================
   BUTTONS — three priority levels
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  padding: 12px 20px;
  border-radius: var(--radius-s);
  border: var(--bw) solid var(--border-paper);
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  box-shadow: var(--shadow-sticker);
  transition: transform var(--dur-quick) var(--ease-snap),
              box-shadow var(--dur-quick) var(--ease-snap),
              background var(--dur-quick) var(--ease-snap);
  user-select: none;
}
.btn:hover  { transform: translate(-1px, -1px); box-shadow: var(--shadow-sticker-lg); }
.btn:active { transform: translate(2px, 2px); box-shadow: 0 0 0 0 var(--border-paper); }

.btn--primary {
  background: var(--lime);
  color: var(--lime-ink);
  border-color: var(--border-paper);
}
.btn--ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--border);
  box-shadow: none;
}
.btn--ghost:hover { background: var(--bg-raised); box-shadow: none; transform: none; }
.btn--mono {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 10px 16px;
}

/* ============================================================
   CARD — chunky bordered surface with optional sticker shadow
   ============================================================ */
.card {
  background: var(--bg-raised);
  border: var(--bw) solid var(--border);
  border-radius: var(--radius-l);
  padding: var(--space-5);
}
.card--sticker {
  box-shadow: var(--shadow-sticker-ink);
  transition: transform var(--dur-quick) var(--ease-snap), box-shadow var(--dur-quick) var(--ease-snap);
}
.surface-paper .card--sticker { box-shadow: var(--shadow-sticker); }
.card--sticker:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow-sticker-ink-lg); }
.surface-paper .card--sticker:hover { box-shadow: var(--shadow-sticker-lg); }

/* ============================================================
   INPUT
   ============================================================ */
.input {
  font-family: var(--font-body);
  font-size: 16px;
  padding: 12px 14px;
  border-radius: var(--radius-s);
  border: var(--bw) solid var(--border);
  background: var(--bg-raised);
  color: var(--text);
  box-shadow: var(--shadow-inset-input);
  width: 100%;
}
.input:focus {
  outline: none;
  border-color: var(--lime);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--lime) 35%, transparent);
}

/* ============================================================
   UTILITIES
   ============================================================ */
.flex { display: flex; }
.gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; } .gap-5 { gap: 24px; }
.col { display: flex; flex-direction: column; }
.center { display: flex; align-items: center; justify-content: center; }
.no-wrap { white-space: nowrap; }