/* =============================================================================
   MOURN — GLOBAL DESIGN SYSTEM
   Source: DESIGN.md (visual reference only — see prompt.md §1–4, §107–108)
   Scope: design tokens, reset, typography, buttons, forms, responsive base.
   Navbar/Footer/Product Card/etc. are separate global components built in
   their own phases (see prompt.md §13) and get their own stylesheets.
   ========================================================================== */

/* -----------------------------------------------------------------------
   1. DESIGN TOKENS
   Values below are taken directly from DESIGN.md. Two deliberate
   adaptations were made where DESIGN.md itself documents a gap:
     - "primary" (white) is exposed here as --color-surface, and the two
       button variants are named --btn-light/--btn-dark by appearance
       rather than "primary/dark", because DESIGN.md's own Known Gaps
       section flags that its "button-primary" (white) is NOT the same
       button as the prominent dark CTA — keeping our own naming
       unambiguous avoids inheriting that confusion.
     - --color-error uses DESIGN.md's accent-red (#dc341e), the closest
       measured value, because DESIGN.md documents zero semantic tokens
       but prompt.md §97 requires user-facing error states somewhere.
   The wider accent palette (yellow, lime, blue family, violet, orange,
   teal) is documented in DESIGN.md as illustration/integration-logo
   color, not core UI — MOURN's spec has no illustration tiles or
   integration logos, so those tokens are intentionally not carried over.
   ----------------------------------------------------------------------- */
:root {
  /* Colors */
  --color-canvas: #000000;      /* page floor */
  --color-surface: #000000;     /* card fills, light-button fill */
  --color-ink: #ffffff;         /* text, outlines, borders (--border-hairline) */
  --color-neutral-900: #000000; /* empty-placeholder fill */
  --color-neutral-500: #8a8a85; /* muted text, placeholders */
  --color-neutral-100: #f0f0f0; /* soft divider / secondary surface */
  --color-accent: #ff90e8;      /* the one core-brand accent per DESIGN.md */
  --color-error: #dc341e;       /* functional error/validation state */

  /* Typography */
  --font-family-base: "Roboto Mono", "Courier New", monospace;

  --font-size-display: clamp(2.5rem, 1.6rem + 6vw, 6rem);   /* ~40px -> 96px */
  --font-size-heading: clamp(1.75rem, 1.4rem + 2.4vw, 3rem); /* ~28px -> 48px */
  --font-size-title: 1.125rem;   /* 18px, fixed */
  --font-size-body: 1rem;        /* 16px, fixed */

  --line-height-display: 1.0;
  --line-height-heading: 1.25;
  --line-height-title: 1.556;
  --line-height-body: 1.5;

  --letter-spacing-display: -0.0042em;
  --letter-spacing-heading: -0.0083em;
  --letter-spacing-title: -0.0222em;
  --letter-spacing-body: -0.025em;

  --font-weight-regular: 400;
  --font-weight-bold: 700; /* only the title/h3 role uses bold */

  /* Spacing scale */
  --space-xxs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-xxl: 40px;
  --space-huge: 64px;
  --space-section: 96px;
  --space-jumbo: 128px;

  /* Radius scale */
  --radius-sm: 4px;   /* inputs */
  --radius-md: 6px;   /* buttons */
  --radius-lg: 16px;  /* small badges/pills */
  --radius-xl: 24px;  /* content cards */

  /* Depth: DESIGN.md measured zero shadows — flat, 1px ink outline instead */
  --border-hairline: 1px solid var(--color-ink);

  /* Container */
  --container-max: 1280px;
  --container-padding: var(--space-md);
}

/* Breakpoint reference (documented — CSS custom properties cannot be used
   inside @media conditions, so media queries below use these literal
   values). DESIGN.md does not define breakpoints (documented gap); this
   scale is the project's own mobile-first responsive foundation.
     sm: 480px   md: 768px   lg: 1024px   xl: 1280px
*/

@media (min-width: 768px) {
  :root {
    --container-padding: var(--space-lg);
  }
}

/* -----------------------------------------------------------------------
   2. RESET
   ----------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd {
  margin: 0;
}

ul[class], ol[class] {
  list-style: none;
  margin: 0;
  padding: 0;
}

img, picture, svg, video {
  display: block;
  max-width: 100%;
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

a {
  color: inherit;
}

button {
  cursor: pointer;
  background: none;
  border: none;
}

/* -----------------------------------------------------------------------
   3. BASE TYPOGRAPHY
   Bare heading tags get a neutral, minimal reset only — the large
   marketing display/heading scale is opt-in via utility classes below.
   This keeps Admin (prompt.md §98: clarity over decoration) from
   inheriting the consumer-facing type scale by accident.
   ----------------------------------------------------------------------- */
body {
  font-family: var(--font-family-base);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  letter-spacing: var(--letter-spacing-body);
  font-weight: var(--font-weight-regular);
  color: var(--color-ink);
  background-color: var(--color-canvas);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-heading);
}

/* Typography utility classes — map directly to DESIGN.md's four roles */
.text-display {
  font-size: var(--font-size-display);
  line-height: var(--line-height-display);
  letter-spacing: var(--letter-spacing-display);
  font-weight: var(--font-weight-regular);
}

.text-heading {
  font-size: var(--font-size-heading);
  line-height: var(--line-height-heading);
  letter-spacing: var(--letter-spacing-heading);
  font-weight: var(--font-weight-regular);
}

.text-title {
  font-size: var(--font-size-title);
  line-height: var(--line-height-title);
  letter-spacing: var(--letter-spacing-title);
  font-weight: var(--font-weight-bold);
}

.text-body {
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  letter-spacing: var(--letter-spacing-body);
  font-weight: var(--font-weight-regular);
}

/* -----------------------------------------------------------------------
   4. ACCESSIBILITY BASELINE
   Not a DESIGN.md component — standard keyboard-navigation hygiene.
   ----------------------------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--color-ink);
  outline-offset: 2px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* -----------------------------------------------------------------------
   5. LAYOUT PRIMITIVE
   ----------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

/* -----------------------------------------------------------------------
   6. BUTTONS
   Two treatments per DESIGN.md (light fill / dark fill), both rounded-md
   with a hairline ink outline (the neo-brutalist depth cue — no shadows).
   Padding is intentionally larger than DESIGN.md's measured 8px: at 8px
   the button's effective tap target falls under the ~44px touch-target
   minimum, which conflicts with prompt.md §84 (mobile-first quality is a
   functional requirement, not a style preference) — color, radius, and
   type stay exactly as specified, only padding is adjusted.
   ----------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-lg);
  min-height: 44px;
  border-radius: var(--radius-md);
  border: var(--border-hairline);
  font-size: var(--font-size-title);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-title);
  letter-spacing: var(--letter-spacing-title);
  text-decoration: none;
  white-space: nowrap;
}

.btn--light {
  background-color: var(--color-surface);
  color: var(--color-ink);
}

.btn--dark {
  background-color: var(--color-ink);
  color: var(--color-surface);
}

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn--block {
  display: flex;
  width: 100%;
}

/* -----------------------------------------------------------------------
   7. FORMS
   ----------------------------------------------------------------------- */
.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin-bottom: var(--space-md);
}

.form-label {
  font-size: var(--font-size-title);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-title);
}

.form-control {
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  min-height: 44px;
  background-color: var(--color-canvas);
  color: var(--color-ink);
  border: var(--border-hairline);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-body);
}

.form-control::placeholder {
  color: var(--color-neutral-500);
}

/* Native <select> arrows sit flush against the edge with no controllable
   spacing (varies by browser) — replace with a custom chevron so it always
   sits with proper breathing room from the border. */
select.form-control {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: var(--space-xl);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-md) center;
  background-size: 12px 8px;
}

textarea.form-control {
  min-height: 120px;
  resize: vertical;
}

.form-hint {
  font-size: 0.875rem;
  color: var(--color-neutral-500);
}

.form-error {
  font-size: 0.875rem;
  color: var(--color-error);
}

.form-control[aria-invalid="true"] {
  border-color: var(--color-error);
}

/* -----------------------------------------------------------------------
   8. ALERTS
   Flat, bordered, no shadows — same neo-brutalist depth cue as buttons.
   ----------------------------------------------------------------------- */
.alert {
  padding: var(--space-md);
  border: var(--border-hairline);
  border-radius: var(--radius-sm);
  background-color: var(--color-surface);
  font-size: var(--font-size-body);
}

.alert--error {
  border-color: var(--color-error);
  color: var(--color-error);
}

/* -----------------------------------------------------------------------
   9. BODY SCROLL LOCK
   Shared by any drawer/overlay (Navbar mobile menu, Shop mobile filter, …).
   ----------------------------------------------------------------------- */
body.has-drawer-open {
  overflow: hidden;
}

/* -----------------------------------------------------------------------
   10. PRODUCT CARD
   Global component (prompt.md §13) — one source of truth, reused by Shop
   now and by Home's Featured Products section later.
   ----------------------------------------------------------------------- */
.product-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: var(--color-ink);
  border: var(--border-hairline);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.product-card__image {
  position: relative;
  aspect-ratio: 1 / 1;
  background-color: var(--color-neutral-900);
  border-bottom: var(--border-hairline);
}

.product-card__badge {
  position: absolute;
  top: var(--space-xs);
  left: var(--space-xs);
  z-index: 1;
  padding: var(--space-xxs) var(--space-xs);
  background-color: var(--color-ink);
  color: var(--color-surface);
  font-size: 0.75rem;
  font-weight: var(--font-weight-bold);
  border-radius: var(--radius-sm);
}

.product-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-card__placeholder {
  width: 100%;
  height: 100%;
}

.product-card__name {
  font-size: var(--font-size-body);
  margin-bottom: var(--space-xxs);
  padding: var(--space-sm) var(--space-sm) 0;
}

.product-card__price {
  display: flex;
  align-items: baseline;
  gap: var(--space-xs);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-bold);
  padding: 0 var(--space-sm) var(--space-sm);
  /* Pins the price to the bottom of the card regardless of how many lines
     the name above it wraps to, so prices stay aligned across a grid row. */
  margin-top: auto;
}

.product-card__price-compare {
  text-decoration: line-through;
  color: var(--color-neutral-500);
  font-weight: var(--font-weight-regular);
  font-size: 0.875rem;
}