/* ==========================================================================
   SMPLX Design System — Tokens & Base
   Foundation file used by every page. Component styles live in
   page-template.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root {
  /* Color */
  --black: #000;
  --ink: #111;
  --muted: #666;
  /* Decorative rules and card edges. 1.43:1 on white — deliberately faint, so
     it must not be the only thing marking out an interactive control. */
  --line: #d8d8d8;
  /* Boundaries of form controls, which WCAG 1.4.11 holds to 3:1. 4.54:1. */
  --line-strong: #767676;
  --soft: #f5f5f5;
  --white: #fff;
  --red: #d6001c;
  --green: #16884a;
  --blue: #1769e0;
  --gold: #ffb000;

  /* Dark surface borders & dividers (footer / dark sections) */
  --dark-line: #2a2a2a;
  --dark-line-strong: #555;
  --dark-text-muted: #888;
  --dark-text-soft: #c7c7c7;

  /* Spacing scale (8px base) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 40px;
  --space-8: 48px;
  --space-9: 56px;
  --space-10: 64px;
  --space-11: 80px;
  --space-12: 96px;
  --space-13: 120px;

  /* Typography */
  --font-display-xl: clamp(56px, 7.4vw, 112px);
  --font-display-lg: clamp(44px, 6vw, 88px);
  --font-display-md: clamp(36px, 5vw, 72px);
  --font-display-sm: clamp(28px, 4vw, 56px);
  --font-h1: clamp(34px, 4.4vw, 56px);
  --font-h2: clamp(26px, 3vw, 42px);
  --font-h3: 24px;
  --font-h4: 20px;
  --font-h5: 16px;
  --font-body-lg: 18px;
  --font-body: 14px;
  --font-body-sm: 13px;
  --font-caption: 12px;
  --font-tag: 10px;
  --font-eyebrow: 11px;

  --weight-regular: 400;
  --weight-bold: 700;
  --weight-heavy: 800;
  --weight-black: 900;

  --line-tight: 0.95;
  --line-snug: 1.1;
  --line-normal: 1.4;
  --line-relaxed: 1.6;

  --letter-tight: -0.02em;
  --letter-normal: 0;
  --letter-wide: 0.04em;
  --letter-wider: 0.08em;

  /* Motion */
  --duration-fast: 160ms;
  --duration-medium: 220ms;
  --ease-out: ease;

  /* Image aspect ratios */
  --ratio-square: 1 / 1;
  --ratio-portrait: 3 / 4;
  --ratio-landscape: 4 / 3;
  --ratio-wide: 16 / 9;
  --ratio-tall: 4 / 5;
  --ratio-card: 16 / 10;
  --ratio-hero: 21 / 9;

  /* Surface */
  --radius: 2px;
  --shadow: 0 24px 60px rgba(0, 0, 0, 0.18);

  /* Root */
  color: var(--ink);
  font-family: "Inter", "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
}

/* --------------------------------------------------------------------------
   2. Base resets
   -------------------------------------------------------------------------- */
* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

/* Readers who asked the OS to reduce motion get none of it: no smooth scroll,
   no hero cross-fade, no drawer slide. The carousel also stops autoplaying —
   see the matchMedia check in the [data-hero] block of page-renderer.js. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Reaches the top of the tab order on every page; visible only when focused.
   Without it keyboard users walk ~12 header controls before the content. */
.skip-link {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 200;
  padding: 12px 18px;
  transform: translateY(-120%);
  background: var(--ink);
  color: var(--white);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

.skip-link:focus {
  transform: translateY(0);
}

body {
  margin: 0;
  background: var(--soft);
}

button,
input {
  font: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  max-width: 760px;
  margin-bottom: 0;
  font-size: var(--font-h1);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: var(--letter-tight);
  text-transform: none;
}

h2 {
  margin-bottom: 0;
  font-size: var(--font-h2);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: normal;
  text-transform: none;
}

h3 {
  margin-bottom: 16px;
  font-size: var(--font-h4);
  font-weight: 600;
  line-height: 1.25;
  text-transform: none;
}

details {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

summary {
  cursor: pointer;
  font-weight: var(--weight-bold);
  text-transform: none;
}

/* --------------------------------------------------------------------------
   3. Typography utilities (match Figma Text Styles)
   -------------------------------------------------------------------------- */
.eyebrow {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: var(--font-eyebrow);
  font-weight: var(--weight-black);
  letter-spacing: var(--letter-wide);
  text-transform: uppercase;
}

.t-display-xl { font-size: var(--font-display-xl); font-weight: var(--weight-black); line-height: var(--line-tight); text-transform: uppercase; letter-spacing: var(--letter-tight); }
.t-display-lg { font-size: var(--font-display-lg); font-weight: var(--weight-black); line-height: var(--line-tight); text-transform: uppercase; }
.t-display-md { font-size: var(--font-display-md); font-weight: var(--weight-black); line-height: var(--line-tight); text-transform: uppercase; }
.t-display-sm { font-size: var(--font-display-sm); font-weight: var(--weight-black); line-height: var(--line-snug); text-transform: uppercase; }
.t-caption    { font-size: var(--font-caption); font-weight: var(--weight-heavy); line-height: var(--line-snug); }
.t-tag        { font-size: var(--font-tag); font-weight: var(--weight-black); letter-spacing: var(--letter-wide); text-transform: uppercase; }
.t-eyebrow    { font-size: var(--font-eyebrow); font-weight: var(--weight-black); letter-spacing: var(--letter-wide); text-transform: uppercase; color: var(--muted); }

/* --------------------------------------------------------------------------
   4. Image ratio utilities (match Figma Image Ratios)
   -------------------------------------------------------------------------- */
.r-square    { aspect-ratio: var(--ratio-square); }
.r-portrait  { aspect-ratio: var(--ratio-portrait); }
.r-landscape { aspect-ratio: var(--ratio-landscape); }
.r-wide      { aspect-ratio: var(--ratio-wide); }
.r-tall      { aspect-ratio: var(--ratio-tall); }
.r-card      { aspect-ratio: var(--ratio-card); }
.r-hero      { aspect-ratio: var(--ratio-hero); }

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */
.button,
.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  border: 1px solid var(--black);
  border-radius: 4px;
  cursor: pointer;
  font-size: var(--font-caption);
  font-weight: var(--weight-bold);
  line-height: 1;
  text-transform: uppercase;
}

.button {
  min-width: max-content;
  padding: 0 16px;
}

.button-primary {
  background: var(--black);
  color: var(--white);
}

.button-secondary {
  background: var(--white);
  color: var(--black);
}

.button:disabled,
.size-grid button:disabled {
  border-color: var(--line);
  color: #b7b7b7;
  cursor: not-allowed;
}

.icon-button {
  display: inline-grid;
  width: 38px;
  padding: 0;
  background: var(--white);
}

.icon-button.dark {
  background: var(--black);
  color: var(--white);
}

.full {
  width: 100%;
}

/* --------------------------------------------------------------------------
   6. Tags & labels
   -------------------------------------------------------------------------- */
.tag,
.product-label {
  display: inline-flex;
  align-self: flex-start;
  width: max-content;
  align-items: center;
  min-height: 24px;
  padding: 0 8px;
  border: 1px solid var(--black);
  background: var(--white);
  color: var(--black);
  font-size: var(--font-tag);
  font-weight: var(--weight-black);
  letter-spacing: var(--letter-wide);
  text-transform: uppercase;
}

.tag.active,
.product-label {
  background: var(--black);
  color: var(--white);
}

.tag.danger,
.product-label.danger {
  border-color: var(--red);
  background: var(--red);
  color: var(--white);
}

.product-label.light {
  background: var(--white);
  color: var(--black);
}

/* --------------------------------------------------------------------------
   7. Forms — checkbox
   -------------------------------------------------------------------------- */
.check {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 32px;
  font-size: var(--font-body-sm);
  font-weight: var(--weight-heavy);
}

.check input {
  width: 22px;
  height: 22px;
  accent-color: var(--black);
}

/* --------------------------------------------------------------------------
   8. Size grid (PDP)
   -------------------------------------------------------------------------- */
.size-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 16px 0;
}

.size-grid button {
  min-height: 44px;
  border: 1px solid var(--black);
  background: var(--white);
  font-weight: var(--weight-bold);
}

/* --------------------------------------------------------------------------
   9. Media surface + shoe illustration (placeholder visuals)
   -------------------------------------------------------------------------- */
.media {
  min-height: 220px;
  border: 1px solid var(--line);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.75), transparent 38%),
    var(--media);
}

.shoe {
  width: min(80%, 260px);
  height: 120px;
  margin: 64px auto 36px;
  border-radius: 60% 40% 36% 20%;
  background: var(--shoe);
  box-shadow:
    inset -18px -22px 0 rgba(0, 0, 0, 0.12),
    0 28px 22px rgba(0, 0, 0, 0.12);
  transform: skewX(-12deg);
}

.shoe::before {
  content: "";
  display: block;
  width: 45%;
  height: 22px;
  margin-left: 24%;
  transform: translateY(28px);
  border-top: 4px solid rgba(255, 255, 255, 0.75);
}

.shoe-red   { --shoe: linear-gradient(135deg, #b50918, #ff4352); }
.shoe-green { --shoe: linear-gradient(135deg, #77846b, #c5d1a4); }
.shoe-black { --shoe: linear-gradient(135deg, #111, #555); }

.shoe.large {
  width: min(86%, 440px);
  height: 190px;
  margin-top: 84px;
}

/* --------------------------------------------------------------------------
   10. Toast notification
   -------------------------------------------------------------------------- */
.toast {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 24px;
  width: min(560px, calc(100vw - 48px));
  padding: 24px 28px;
  border-radius: 14px;
  background: var(--black);
  color: var(--white);
  box-shadow: var(--shadow);
  transform: translateY(140%);
  transition: transform 180ms ease;
}

.toast.show {
  transform: translateY(0);
}

.toast span {
  font-size: 32px;
  line-height: 1;
}