/* =========================================================================
   MI GLOBAL - core stylesheet
   Every value here is declared in DESIGN.md. Nothing is invented at use site.
   ========================================================================= */

@layer reset, tokens, base, layout, components, utilities;

/* ------------------------------------------------------------------ fonts */

@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-var.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: url("../fonts/geist-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("../fonts/geist-mono-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ------------------------------------------------------------------ reset */

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body { min-height: 100%; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
  img, picture, video, canvas, svg { display: block; max-width: 100%; }
  input, button, textarea, select { font: inherit; color: inherit; }
  p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
  ul[class], ol[class] { list-style: none; padding: 0; }
  a { color: inherit; text-decoration: none; }
  button { background: none; border: 0; cursor: pointer; }
  table { border-collapse: collapse; }
  :target { scroll-margin-top: 96px; }
}

/* ----------------------------------------------------------------- tokens */

@layer tokens {
  :root {
    /* Dark is the default expression of the brand. */
    --bg: #0B0C0C;
    --bg-elev: #141616;
    --bg-elev-2: #1D2020;
    --line: #2A2E2E;
    /* Control borders, not just dividers, so this has to clear 3:1 against the
       page. Verified by tools/contrast.js. */
    --line-strong: #6A706D;
    --text: #EDEFEE;
    --text-dim: #9BA19E;
    --text-faint: #868C89;

    --accent: #C4F042;
    --accent-hover: #D2FA60;
    --accent-ink: #0B0C0C;
    --accent-soft: rgba(196, 240, 66, 0.12);
    --accent-text: #C4F042;
    --focus: #C4F042;

    --danger: #F0705A;
    --success: #4FBE7C;
    --warn: #E9A833;
    --sale-bg: #F0705A;
    --sale-ink: #0B0C0C;

    /* The lightbox plate product photography sits on. */
    --plate-1: #F2F3F2;
    --plate-2: #DEE1DE;

    --shadow-1: 0 1px 2px rgba(11, 12, 12, 0.28);
    --shadow-2: 0 8px 24px -8px rgba(11, 12, 12, 0.45);
    --shadow-3: 0 24px 64px -16px rgba(11, 12, 12, 0.60);
    --inset-hi: inset 0 1px 0 rgba(255, 255, 255, 0.06);

    --r: 4px;
    --r-pill: 999px;

    --s-1: 4px;  --s-2: 8px;   --s-3: 12px;  --s-4: 16px;  --s-5: 24px;
    --s-6: 32px; --s-7: 48px;  --s-8: 64px;  --s-9: 96px;  --s-10: 128px; --s-11: 160px;

    --container: 1440px;
    --gutter: 20px;
    --header-h: 68px;

    --font-display: "Archivo", "Arial Narrow", system-ui, sans-serif;
    --font-body: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-mono: "Geist Mono", ui-monospace, "SF Mono", "Cascadia Mono", monospace;

    --fs-display-xl: clamp(2.75rem, 8.5vw, 7.5rem);
    --fs-display-l:  clamp(2.25rem, 5.5vw, 4.5rem);
    --fs-h1:         clamp(1.875rem, 4vw, 3rem);
    --fs-h2:         clamp(1.5rem, 2.8vw, 2.25rem);
    --fs-h3:         1.25rem;
    --fs-body-l:     1.125rem;
    --fs-body:       1rem;
    --fs-sm:         0.875rem;
    --fs-micro:      0.75rem;

    --ease: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
    --d-micro: 140ms;
    --d-ui: 240ms;
    --d-enter: 420ms;
    --d-hero: 700ms;

    --z-sticky: 40;
    --z-header: 50;
    --z-drawer: 60;
    --z-modal: 70;
    --z-toast: 80;

    color-scheme: dark;
  }

  @media (min-width: 768px) { :root { --gutter: 32px; --header-h: 72px; } }
  @media (min-width: 1280px) { :root { --gutter: 40px; } }

  :root[data-theme="light"] {
    --bg: #F4F5F4;
    --bg-elev: #FFFFFF;
    --bg-elev-2: #EBEDEB;
    --line: #DCDFDC;
    --line-strong: #868C89;
    --text: #0B0C0C;
    --text-dim: #4C524F;
    --text-faint: #636966;

    --accent-hover: #B3E02F;
    --accent-soft: rgba(196, 240, 66, 0.22);
    --accent-text: #4C6B00;
    /* The sulphur accent is only 1.2:1 against a near-white page, so it cannot
       be the focus ring here. A keyboard user has to be able to see it. */
    --focus: #3F5A00;

    --danger: #A82A14;
    --success: #1C6B3F;
    --warn: #7A5200;
    --sale-bg: #A82A14;
    --sale-ink: #FFFFFF;

    --plate-1: #FFFFFF;
    --plate-2: #EDEFED;

    --shadow-1: 0 1px 2px rgba(11, 12, 12, 0.06);
    --shadow-2: 0 8px 24px -8px rgba(11, 12, 12, 0.12);
    --shadow-3: 0 24px 64px -16px rgba(11, 12, 12, 0.16);
    --inset-hi: inset 0 1px 0 rgba(255, 255, 255, 0.9);

    color-scheme: light;
  }

  @media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) {
      --bg: #F4F5F4;
      --bg-elev: #FFFFFF;
      --bg-elev-2: #EBEDEB;
      --line: #DCDFDC;
      --line-strong: #868C89;
      --text: #0B0C0C;
      --text-dim: #4C524F;
      --text-faint: #636966;
      --accent-hover: #B3E02F;
      --accent-soft: rgba(196, 240, 66, 0.22);
      --accent-text: #4C6B00;
      --focus: #3F5A00;
      --danger: #A82A14;
      --success: #1C6B3F;
      --warn: #7A5200;
      --sale-bg: #A82A14;
      --sale-ink: #FFFFFF;
      --plate-1: #FFFFFF;
      --plate-2: #EDEFED;
      --shadow-1: 0 1px 2px rgba(11, 12, 12, 0.06);
      --shadow-2: 0 8px 24px -8px rgba(11, 12, 12, 0.12);
      --shadow-3: 0 24px 64px -16px rgba(11, 12, 12, 0.16);
      --inset-hi: inset 0 1px 0 rgba(255, 255, 255, 0.9);
      color-scheme: light;
    }
  }
}

/* ------------------------------------------------------------------- base */

@layer base {
  html { scroll-behavior: smooth; }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

  body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: 1.65;
    font-weight: 400;
    overflow-x: clip;
  }

  h1, h2, h3, .display {
    font-family: var(--font-display);
    font-weight: 700;
    font-stretch: 118%;
    letter-spacing: -0.02em;
    line-height: 1.05;
    text-wrap: balance;
  }

  h1 { font-size: var(--fs-h1); }
  h2 { font-size: var(--fs-h2); line-height: 1.12; letter-spacing: -0.015em; }
  h3 { font-size: var(--fs-h3); font-stretch: 108%; letter-spacing: -0.01em; line-height: 1.3; }

  p { text-wrap: pretty; }

  ::selection { background: var(--accent); color: var(--accent-ink); }

  :focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
    border-radius: 2px;
  }

  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-track { background: var(--bg); }
  ::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: var(--r-pill); }
  ::-webkit-scrollbar-thumb:hover { background: var(--text-faint); }

  .skip-link {
    position: absolute;
    left: var(--s-4);
    top: -100px;
    z-index: 100;
    background: var(--accent);
    color: var(--accent-ink);
    padding: var(--s-3) var(--s-5);
    border-radius: var(--r);
    font-weight: 600;
    transition: top var(--d-ui) var(--ease);
  }
  .skip-link:focus { top: var(--s-4); }
}

/* ----------------------------------------------------------------- layout */

@layer layout {
  .wrap {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }

  .wrap-narrow {
    width: 100%;
    max-width: 820px;
    margin-inline: auto;
    padding-inline: var(--gutter);
  }

  /* Two rhythms only. Adjacent sections both at full rhythm would stack to a
     256px trough, so a full section is always followed by a tight one. */
  .section { padding-block: var(--s-9); }
  @media (min-width: 1024px) { .section { padding-block: var(--s-10); } }

  .section-tight { padding-block: var(--s-7); }
  @media (min-width: 1024px) { .section-tight { padding-block: var(--s-9); } }

  .section-head {
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
    margin-bottom: var(--s-7);
  }
  /* The measure is set on the children, not the wrapper, so a long headline
     and a long paragraph can each breathe at their own width. */
  .section-head > h2 { max-width: 18ch; }
  .section-head p { color: var(--text-dim); max-width: 54ch; }

  /* A section head with a trailing link on the same baseline. */
  .section-head-row {
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    max-width: none;
    gap: var(--s-5);
  }

  .grid { display: grid; gap: var(--s-5); }
  .stack { display: flex; flex-direction: column; }
  .row { display: flex; align-items: center; }

  .rule { border: 0; border-top: 1px solid var(--line); }
}

/* ------------------------------------------------------------- components */

@layer components {

  /* --- micro label. Rationed: see the eyebrow budget in DESIGN.md --- */
  .eyebrow {
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-faint);
    font-weight: 500;
  }

  .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

  .lead { font-size: var(--fs-body-l); color: var(--text-dim); max-width: 58ch; }

  /* --- buttons --- */
  .btn {
    --btn-bg: transparent;
    --btn-fg: var(--text);
    --btn-bd: var(--line-strong);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    white-space: nowrap;
    padding: 13px 22px;
    min-height: 46px;
    border-radius: var(--r);
    background: var(--btn-bg);
    color: var(--btn-fg);
    border: 1px solid var(--btn-bd);
    font-size: var(--fs-sm);
    font-weight: 600;
    letter-spacing: -0.005em;
    cursor: pointer;
    transition: background-color var(--d-micro) var(--ease),
                border-color var(--d-micro) var(--ease),
                color var(--d-micro) var(--ease),
                transform var(--d-micro) var(--ease);
  }
  .btn:hover { transform: translateY(-1px); }
  .btn:active { transform: translateY(1px); transition-duration: 60ms; }
  .btn[disabled], .btn[aria-disabled="true"] {
    opacity: 0.45;
    pointer-events: none;
  }

  .btn-primary { --btn-bg: var(--accent); --btn-fg: var(--accent-ink); --btn-bd: var(--accent); }
  .btn-primary:hover { --btn-bg: var(--accent-hover); --btn-bd: var(--accent-hover); }

  .btn-ghost { --btn-bg: transparent; --btn-fg: var(--text); --btn-bd: var(--line-strong); }
  .btn-ghost:hover { --btn-bd: var(--text); }

  .btn-quiet { --btn-bd: transparent; --btn-fg: var(--text-dim); padding-inline: var(--s-3); }
  .btn-quiet:hover { --btn-fg: var(--text); --btn-bg: var(--bg-elev-2); }

  .btn-sm { min-height: 38px; padding: 9px 16px; font-size: var(--fs-micro); }
  .btn-lg { min-height: 54px; padding: 16px 30px; font-size: var(--fs-body); }
  .btn-block { width: 100%; }

  .btn-icon {
    min-height: 42px;
    width: 42px;
    padding: 0;
    border-color: transparent;
    color: var(--text-dim);
  }
  .btn-icon:hover { color: var(--text); background: var(--bg-elev-2); }

  /* --- text link with an underline that grows from the left --- */
  .link {
    display: inline-block;
    color: var(--text);
    font-weight: 500;
    background-image: linear-gradient(var(--accent), var(--accent));
    background-repeat: no-repeat;
    background-size: 0% 1px;
    background-position: 0 100%;
    transition: background-size var(--d-ui) var(--ease), color var(--d-micro) var(--ease);
    padding-bottom: 2px;
  }
  .link:hover { background-size: 100% 1px; }

  .link-dim { color: var(--text-dim); }
  .link-dim:hover { color: var(--text); }

  /* --- badges --- */
  .badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: var(--r-pill);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 500;
    border: 1px solid var(--line);
    color: var(--text-dim);
    background: var(--bg-elev);
  }
  .badge-accent { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
  .badge-sale { background: var(--sale-bg); color: var(--sale-ink); border-color: var(--sale-bg); }
  .badge-out { color: var(--text-faint); }
  .badge-stock { color: var(--success); border-color: color-mix(in srgb, var(--success) 40%, transparent); }

  /* --- forms --- */
  .field { display: flex; flex-direction: column; gap: var(--s-2); }
  .field > label {
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--text);
  }
  .field .hint { font-size: var(--fs-micro); color: var(--text-faint); }
  .field .err {
    font-size: var(--fs-sm);
    color: var(--danger);
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .input, .select, .textarea {
    width: 100%;
    background: var(--bg-elev-2);
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: 12px 14px;
    min-height: 46px;
    color: var(--text);
    font-size: var(--fs-body);
    transition: border-color var(--d-micro) var(--ease), background-color var(--d-micro) var(--ease);
  }
  .textarea { min-height: 140px; resize: vertical; line-height: 1.6; }
  .input::placeholder, .textarea::placeholder { color: var(--text-faint); }
  .input:hover, .select:hover, .textarea:hover { border-color: var(--line-strong); }
  .input:focus-visible, .select:focus-visible, .textarea:focus-visible {
    border-color: var(--focus);
    outline: 2px solid var(--focus);
    outline-offset: 1px;
  }
  .field[data-invalid] .input,
  .field[data-invalid] .select,
  .field[data-invalid] .textarea { border-color: var(--danger); }

  .select {
    appearance: none;
    padding-right: 40px;
    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                      linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: calc(100% - 20px) 21px, calc(100% - 15px) 21px;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
  }

  .check {
    display: flex;
    align-items: flex-start;
    gap: var(--s-3);
    cursor: pointer;
    font-size: var(--fs-sm);
    color: var(--text-dim);
  }
  .check input { accent-color: var(--accent); width: 18px; height: 18px; margin-top: 2px; flex: none; }

  /* --- cards --- */
  .card {
    background: var(--bg-elev);
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: var(--inset-hi);
  }

  /* --- price --- */
  .price {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-weight: 500;
    letter-spacing: -0.01em;
  }
  .price-was {
    color: var(--text-faint);
    text-decoration: line-through;
    font-size: 0.85em;
    margin-left: var(--s-2);
  }

  /* --- stars --- */
  .stars { display: inline-flex; align-items: center; gap: 2px; color: var(--accent); }
  .stars svg { width: 14px; height: 14px; }
  .stars .empty { color: var(--line-strong); }

  /* --- flash messages --- */
  .flash-stack {
    position: fixed;
    inset-block-start: calc(var(--header-h) + var(--s-4));
    inset-inline-end: var(--s-4);
    z-index: var(--z-toast);
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
    max-width: min(380px, calc(100vw - 2 * var(--s-4)));
  }
  .flash {
    display: flex;
    align-items: flex-start;
    gap: var(--s-3);
    padding: var(--s-3) var(--s-4);
    border-radius: var(--r);
    background: var(--bg-elev);
    border: 1px solid var(--line-strong);
    box-shadow: var(--shadow-2);
    font-size: var(--fs-sm);
    animation: flash-in var(--d-ui) var(--ease) both;
  }
  .flash[data-type="success"] { border-inline-start: 3px solid var(--success); }
  .flash[data-type="error"] { border-inline-start: 3px solid var(--danger); }
  .flash[data-type="info"] { border-inline-start: 3px solid var(--accent); }
  @keyframes flash-in {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: none; }
  }

  /* --- skeleton loading --- */
  .skeleton {
    background: linear-gradient(90deg, var(--bg-elev) 0%, var(--bg-elev-2) 50%, var(--bg-elev) 100%);
    background-size: 200% 100%;
    animation: skeleton 1.4s linear infinite;
    border-radius: var(--r);
  }
  @keyframes skeleton { to { background-position: -200% 0; } }

  /* --- empty state --- */
  .empty-state {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s-4);
    padding: var(--s-8) var(--s-5);
    border: 1px dashed var(--line-strong);
    border-radius: var(--r);
    max-width: 52ch;
  }
  .empty-state h3 { font-size: var(--fs-h3); }
  .empty-state p { color: var(--text-dim); }

  /* --- breadcrumb --- */
  .crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-2);
    font-size: var(--fs-sm);
    color: var(--text-faint);
  }
  .crumbs a:hover { color: var(--text); }
  .crumbs svg { width: 12px; height: 12px; opacity: 0.6; }

  /* --- pagination --- */
  .pager { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
  .pager a, .pager span {
    min-width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line);
    border-radius: var(--r);
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    color: var(--text-dim);
    transition: border-color var(--d-micro) var(--ease), color var(--d-micro) var(--ease);
  }
  .pager a:hover { border-color: var(--text); color: var(--text); }
  .pager [aria-current="page"] {
    background: var(--accent);
    color: var(--accent-ink);
    border-color: var(--accent);
    font-weight: 600;
  }
  .pager .gap { border-color: transparent; }
}

/* -------------------------------------------------------------- utilities */

@layer utilities {
  .sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  .text-dim { color: var(--text-dim); }
  .text-faint { color: var(--text-faint); }
  .text-accent { color: var(--accent-text); }
  .text-center { text-align: center; }
  .full-bleed { width: 100vw; margin-inline: calc(50% - 50vw); }
  .hide-mobile { display: none; }
  @media (min-width: 768px) { .hide-mobile { display: revert; } }
  @media (min-width: 1024px) { .hide-desktop { display: none !important; } }
  .no-scroll { overflow: hidden; }
}

/* -------------------------------------------------- reduced motion global */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .skeleton { animation: none; background: var(--bg-elev-2); }
}