/* ============================================================
   SHIFT64 — Design Tokens (Colors + Type)
   Source of truth derived from the SHIFT64 codebase
   (Astro + Tailwind 4, neubrutalist aesthetic).
   ============================================================ */

:root {
  /* ----------------------------------------------------------
     BRAND COLORS
     The whole system runs on black + white + two accents
     (hot pink + electric yellow). No mid-tones, no pastels.
     ---------------------------------------------------------- */
  --color-black:        #000000;
  --color-white:        #ffffff;
  --color-pink:         #ec4899;   /* tailwind pink-500 — primary accent */
  --color-pink-shadow:  #f6339a;   /* hard shadow under nav / cards     */
  --color-yellow:       #fde047;   /* tailwind yellow-300 — secondary   */
  --color-dark:         #111827;   /* tailwind gray-900 — dark sections */

  /* Neutral text scale (gray-700 → gray-400, used sparingly) */
  --color-fg-body:      #374151;   /* gray-700 — body text              */
  --color-fg-muted:     #4b5563;   /* gray-600 — subtitles, placeholder */
  --color-fg-label:     #6b7280;   /* gray-500 — "Written by" labels    */
  --color-fg-quote:     #9ca3af;   /* gray-400 — italic pull quotes     */

  /* Semantic */
  --color-error-border: #ef4444;   /* red-500 */
  --color-error-text:   #dc2626;   /* red-600 */
  --color-error-bg:     #fee2e2;   /* red-100 */
  --color-success-text: #166534;   /* green-800 */
  --color-success-bg:   #dcfce7;   /* green-100 */

  /* Aliases that match how the codebase reads */
  --bg:        var(--color-white);
  --bg-dark:   var(--color-dark);
  --bg-accent: var(--color-yellow);
  --fg:        var(--color-black);
  --fg-body:   var(--color-fg-body);
  --accent:    var(--color-pink);
  --accent-2:  var(--color-yellow);
  --border:    var(--color-black);

  /* ----------------------------------------------------------
     TYPOGRAPHY
     Single family — Inter — for headings + body.
     Distinction comes from WEIGHT + TRANSFORM, never family.
     ---------------------------------------------------------- */
  --font-sans:    Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-heading: var(--font-sans);
  --font-mono:    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* Weight scale — black is the dominant heading weight */
  --weight-medium: 500;
  --weight-bold:   700;
  --weight-black:  900;

  /* Heading sizes (mobile baseline; scale up at lg/xl in markup) */
  --size-h1:    clamp(2.25rem, 4vw + 1rem, 4.5rem);   /* text-4xl → 7xl */
  --size-h2:    clamp(2.25rem, 3vw + 1rem, 3.75rem);  /* text-4xl → 6xl */
  --size-h3:    1.5rem;                                /* text-2xl       */
  --size-h4:    1.25rem;                               /* text-xl        */
  --size-body-l:1.25rem;                               /* text-xl        */
  --size-body:  1.125rem;                              /* text-lg        */
  --size-small: 0.875rem;                              /* text-sm        */
  --size-xs:    0.75rem;                               /* text-xs        */

  --leading-tight:    0.9;
  --leading-snug:     1.1;
  --leading-relaxed:  1.625;
  --tracking-tight:  -0.02em;
  --tracking-wider:   0.05em;

  /* ----------------------------------------------------------
     STRUCTURE
     Hard edges only. No radius (except icon circles).
     Hard offset shadows — no blur, no spread.
     ---------------------------------------------------------- */
  --radius-none:   0;
  --radius-circle: 9999px;       /* ONLY exception: icon circles */

  --border-2: 2px solid var(--color-black);
  --border-4: 4px solid var(--color-black);
  --border-pink-2: 2px solid var(--color-pink);
  --border-pink-4: 4px solid var(--color-pink);

  --shadow-sm:    4px 4px 0 0 var(--color-black);
  --shadow-sm-h:  2px 2px 0 0 var(--color-black);
  --shadow-md:    6px 6px 0 0 var(--color-black);
  --shadow-md-h:  3px 3px 0 0 var(--color-black);
  --shadow-lg:    8px 8px 0 0 var(--color-black);
  --shadow-lg-h:  6px 6px 0 0 var(--color-black);
  --shadow-xl:   12px 12px 0 0 var(--color-black);

  --shadow-pink-sm: 4px 4px 0 0 var(--color-pink-shadow);
  --shadow-pink-md: 6px 6px 0 0 var(--color-pink-shadow);
  --shadow-pink-lg: 8px 8px 0 0 var(--color-pink-shadow);

  /* Spacing (Tailwind-compatible) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-32: 8rem;

  /* Motion — small, snappy translates only. No bouncy easing. */
  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);   /* tailwind default  */
  --dur-fast:   150ms;
  --dur-base:   200ms;
  --dur-slow:   300ms;

  /* Hover-shift distances (translate values) */
  --shift-sm: 4px;   /* +translate(1,1) */
  --shift-md: 8px;   /* +translate(2,2) */
}

/* ============================================================
   SEMANTIC ELEMENT STYLES
   Apply these classes (.h1, .h2, .body, .badge, .btn-primary…)
   anywhere you want the SHIFT64 look without Tailwind.
   ============================================================ */

html, body {
  font-family: var(--font-sans);
  color: var(--color-black);
  background: var(--color-white);
  -webkit-font-smoothing: antialiased;
}

.h1, h1.shift64 {
  font-family: var(--font-heading);
  font-weight: var(--weight-black);
  font-size: var(--size-h1);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
  color: var(--color-black);
}

.h2, h2.shift64 {
  font-family: var(--font-heading);
  font-weight: var(--weight-black);
  font-size: var(--size-h2);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
  color: var(--color-black);
}

.h3, h3.shift64 {
  font-family: var(--font-heading);
  font-weight: var(--weight-black);
  font-size: var(--size-h3);
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
}

.h4, h4.shift64 {
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: var(--size-h4);
  letter-spacing: var(--tracking-tight);
}

.body-l { font-size: var(--size-body-l); line-height: var(--leading-relaxed); color: var(--color-fg-body); font-weight: var(--weight-medium); }
.body   { font-size: var(--size-body);   line-height: var(--leading-relaxed); color: var(--color-fg-body); font-weight: var(--weight-medium); }
.small  { font-size: var(--size-small);  color: var(--color-fg-muted); }
.label  { font-size: var(--size-xs); font-weight: var(--weight-bold); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--color-fg-label); }
.mono   { font-family: var(--font-mono); }

/* Pink emphasis used inside headings */
.accent-text { color: var(--color-pink); }

/* ----- Badge ----------------------------------------------- */
.badge {
  display: inline-block;
  padding: 0.5rem 1rem;
  background: var(--color-black);
  color: var(--color-white);
  font-weight: var(--weight-bold);
  font-size: var(--size-small);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}
.badge--yellow { background: var(--color-yellow); color: var(--color-black); }
.badge--tag    { background: var(--color-yellow); color: var(--color-black); border: var(--border-2); padding: 0.25rem 0.75rem; font-size: var(--size-xs); }

/* ----- Buttons --------------------------------------------- */
.btn {
  display: inline-block;
  font-family: var(--font-heading);
  font-weight: var(--weight-black);
  text-transform: uppercase;
  text-decoration: none;
  border: var(--border-4);
  padding: 1rem 1.5rem;
  font-size: var(--size-body-l);
  transition: transform var(--dur-base) var(--ease-default),
              box-shadow var(--dur-base) var(--ease-default),
              background-color var(--dur-base) var(--ease-default),
              color var(--dur-base) var(--ease-default);
  cursor: pointer;
  box-shadow: var(--shadow-lg);
}
.btn:hover { transform: translate(var(--shift-sm), var(--shift-sm)); box-shadow: var(--shadow-lg-h); }

.btn--primary   { background: var(--color-yellow); color: var(--color-black); }
.btn--primary:hover { background: var(--color-pink); color: var(--color-white); }

.btn--secondary { background: var(--color-pink); color: var(--color-white); }
.btn--secondary:hover { background: var(--color-yellow); color: var(--color-black); }

.btn--outline   { background: var(--color-white); color: var(--color-black); }
.btn--outline:hover { background: var(--color-yellow); color: var(--color-black); }

.btn--sm { padding: 0.5rem 1rem; font-size: var(--size-small); border-width: 2px; box-shadow: var(--shadow-sm); }
.btn--sm:hover { box-shadow: var(--shadow-sm-h); transform: translate(var(--shift-sm), var(--shift-sm)); }

.btn--nav {                                          /* pink-shadow nav button */
  padding: 0.5rem 1rem;
  font-size: var(--size-small);
  border-width: 2px;
  background: var(--color-white);
  color: var(--color-black);
  box-shadow: var(--shadow-pink-sm);
}
.btn--nav:hover { background: var(--color-yellow); transform: translate(var(--shift-sm), var(--shift-sm)); box-shadow: 2px 2px 0 0 var(--color-pink-shadow); }

/* ----- Card ------------------------------------------------- */
.card {
  background: var(--color-white);
  border: var(--border-4);
  padding: 1.5rem;
  box-shadow: var(--shadow-lg);
}

.card--dark {
  background: var(--color-dark);
  color: var(--color-white);
  box-shadow: var(--shadow-pink-lg);
}

/* ----- Input ----------------------------------------------- */
.input {
  width: 100%;
  padding: 1rem;
  border: var(--border-4);
  background: var(--color-white);
  font-weight: var(--weight-bold);
  font-size: var(--size-body);
  color: var(--color-black);
  transition: border-color var(--dur-base) var(--ease-default);
}
.input::placeholder { color: var(--color-fg-muted); }
.input:focus { outline: none; border-color: var(--color-pink); }

/* ----- Code blocks ----------------------------------------- */
code, pre { font-family: var(--font-mono); }

/* ----- Custom prose bullets (mirrors global.css from site) - */
.prose ul { list-style: none; padding-left: 0; }
.prose ul > li { position: relative; padding-left: 1.5rem; color: var(--color-fg-body); }
.prose ul > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5rem;
  width: 0.75rem;
  height: 0.75rem;
  background: var(--color-pink);
  border: 1px solid var(--color-black);
  box-shadow: 2px 2px 0 0 var(--color-black);
}
.prose ol { list-style-type: decimal; padding-left: 1.5rem; }
.prose ol > li { color: var(--color-fg-body); padding-left: 0.5rem; }
.prose ol > li::marker { font-weight: var(--weight-black); color: var(--color-pink); }