:root, body {

  --bg-base:         #FAF7F5;
  --bg-raised:       #F2ECE8;
  --bg-sunken:       #EDE6E1;
  --surface-1:       #FFFFFF;
  --surface-2:       #EFE8E4;
  --surface-article: #FFFCF7;

  --text-primary:   rgba(26, 20, 17, 0.90);
  --text-secondary: rgba(26, 20, 17, 0.62);
  --text-disabled:  rgba(26, 20, 17, 0.42);
  --text-legal:     rgba(26, 20, 17, 0.62);
  --text-article:   rgba(26, 20, 17, 0.78);

  --line:        rgba(26, 20, 17, 0.14);
  --line-strong: rgba(26, 20, 17, 0.26);
  --bw:        1px;
  --bw-strong: 1.5px;

  --accent:       #E0175C;
  --accent-hover: #C4114E;
  --accent-press: #A80D42;
  --on-accent:    #FFFFFF;
  --focus-ring:   #C4114E;

  --cta-gradient-internal: linear-gradient(100deg, #F9B23C 0%, #F27C4A 50%, #E85C86 100%);
  --on-gradient: #16110F;

  --dest-primary: #E0175C;
  --on-dest:      #FFFFFF;

  --state-success:  #2F7D5B;
  --state-warning:  #8A6410;
  --state-error:    #B3261E;
  --state-inactive: #D8D2CE;

  --ff-jp:    "M PLUS Rounded 1c", system-ui, sans-serif;
  --ff-latin: "Nunito", var(--ff-jp), sans-serif;
  --ff-num:   "Nunito", sans-serif;
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-bold:    700;

  --fs-4xs: 0.625rem;
  --fs-3xs: 0.6875rem;
  --fs-2xs: 0.75rem;
  --fs-xs:  0.8125rem;
  --fs-sm:  0.875rem;
  --fs-base:0.9375rem;
  --fs-md:  1.0625rem;
  --fs-lg:  1.25rem;
  --fs-xl:  1.5rem;
  --fs-2xl: 1.875rem;
  --fs-3xl: 2.375rem;

  --fs-article: 1rem;

  --lh-heading: 1.4;
  --lh-body:    1.8;
  --lh-article: 1.9;
  --lh-tight:   1.5;
  --ls-heading: 0.01em;
  --ls-body:    0.01em;
  --ls-label:   0.04em;

  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px; --sp-5: 20px;
  --sp-6: 24px; --sp-7: 32px; --sp-8: 40px; --sp-9: 56px; --sp-10: 80px;

  --r-1: 4px;
  --r-2: 8px;
  --r-3: 14px;

  --dur-1: 150ms;
  --dur-2: 200ms;
  --dur-3: 250ms;
  --ease: cubic-bezier(0.2, 0, 0.2, 1);

  --z-header:  100;
  --z-drawer:  200;
  --z-modal:   300;
  --z-agegate: 400;
  --z-toast:   500;

  --w-max:      1200px;
  --w-article:   680px;
  --w-side:      320px;
  --pad-x: var(--sp-5);
  --grid-cols: 2;
  --grid-gap-y: 28px;
  --grid-gap-x: var(--sp-3);
  --shelf-card-w: 132px;
  --thumb-ratio: 1 / 1;
  --tap-min: 44px;

  --ad-h-head:  300px;
  --ad-h-mid:   500px;
  --ad-h-foot:  300px;
  --ad-h-fixed:  60px;

  --ad-h-pc-inline: 280px;
  --ad-h-pc-side:   600px;
}

@media (min-width: 600px) {
  :root, body {
    --pad-x: var(--sp-7);
    --grid-cols: 3;
    --grid-gap-y: 32px;
    --grid-gap-x: var(--sp-4);
    --shelf-card-w: 148px;
  }
}

@media (min-width: 900px) {
  :root, body {
    --pad-x: var(--sp-8);
    --grid-cols: 4;
    --grid-gap-y: 40px;
    --grid-gap-x: var(--sp-5);
    --shelf-card-w: 168px;
  }
}

@media (min-width: 1200px) {
  :root, body {
    --pad-x: var(--sp-7);
    --grid-cols: 4;
    --grid-gap-y: var(--sp-5);
    --grid-gap-x: var(--sp-5);
    --shelf-card-w: 180px;
  }
}