/*
 * KOH Japanese Modern Commerce — Design Tokens v1.0
 * Shopify-ready / Japanese Modern = Quiet Structure
 */

:root {
  /* Raw color palette */
  --koh-off-white: #f7f5f1;
  --koh-warm-ivory: #f2eee9;
  --koh-greige: #cac0b3;
  --koh-sage-gray: #b7bdaf;
  --koh-charcoal: #484440;
  --koh-paper-white: #fcfbf8;
  --koh-charcoal-dark: #35322f;
  --koh-charcoal-deep: #272522;
  --koh-warm-gray: #716b65;
  --koh-muted: #746d67;
  --koh-sage-deep: #6e7668;
  --koh-sage-soft: #e1e4dc;
  --koh-error: #8b5149;
  --koh-success: #65705f;

  /* Raw alpha colors */
  --koh-charcoal-a06: rgba(72, 68, 64, 0.06);
  --koh-charcoal-a08: rgba(72, 68, 64, 0.08);
  --koh-charcoal-a12: rgba(72, 68, 64, 0.12);
  --koh-charcoal-a18: rgba(72, 68, 64, 0.18);
  --koh-charcoal-a34: rgba(72, 68, 64, 0.34);
  --koh-charcoal-a56: rgba(72, 68, 64, 0.56);

  /* Semantic colors */
  --color-bg-primary: var(--koh-off-white);
  --color-bg-secondary: var(--koh-warm-ivory);
  --color-bg-elevated: var(--koh-paper-white);
  --color-surface-primary: var(--koh-off-white);
  --color-surface-secondary: var(--koh-warm-ivory);
  --color-surface-accent: var(--koh-sage-soft);
  --color-text-primary: var(--koh-charcoal);
  --color-text-secondary: var(--koh-warm-gray);
  --color-text-muted: var(--koh-muted);
  --color-text-inverse: var(--koh-off-white);
  --color-border-subtle: var(--koh-charcoal-a18);
  --color-border-default: var(--koh-charcoal-a34);
  --color-border-strong: var(--koh-charcoal);
  --color-accent: var(--koh-sage-gray);
  --color-accent-soft: var(--koh-sage-soft);
  --color-focus: var(--koh-sage-deep);
  --color-error: var(--koh-error);
  --color-success: var(--koh-success);

  /* Font stacks */
  --font-sans-ja: "Hiragino Kaku Gothic ProN", "Yu Gothic", "YuGothic", "Noto Sans JP", sans-serif;
  --font-serif-ja: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  --font-serif-latin: "Bodoni 72", "Iowan Old Style", "Times New Roman", serif;
  --font-mono: "SFMono-Regular", Consolas, monospace;
  --font-body: var(--font-sans-ja);
  --font-heading: var(--font-serif-ja);
  --font-display: var(--font-serif-ja);
  --font-label: var(--font-sans-ja);
  --font-product: var(--font-serif-latin);

  /* Font weights */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  /* Raw type sizes */
  --font-size-1: 0.5625rem;   /* 9px */
  --font-size-2: 0.625rem;    /* 10px */
  --font-size-3: 0.75rem;     /* 12px */
  --font-size-4: 0.875rem;    /* 14px */
  --font-size-5: 1rem;        /* 16px */
  --font-size-6: 1.125rem;    /* 18px */
  --font-size-7: 1.5rem;      /* 24px */
  --font-size-8: 2rem;        /* 32px */
  --font-size-9: 2.5rem;      /* 40px */

  /* Semantic fluid type */
  --type-display: clamp(1.875rem, 1.55rem + 1.3vw, 2.5rem);
  --type-h1: clamp(1.6875rem, 1.5rem + 0.75vw, 2rem);
  --type-h2: clamp(1.3125rem, 1.2rem + 0.5vw, 1.5rem);
  --type-h3: clamp(1.0625rem, 1rem + 0.25vw, 1.125rem);
  --type-body-lg: 1rem;
  --type-body: 0.875rem;
  --type-small: 0.75rem;
  --type-label: 0.9rem;
  --type-button: 0.6875rem; /* 11px */
  --type-micro: 0.5625rem;

  /* Semantic line heights */
  --leading-display: 1.52;
  --leading-heading: 1.55;
  --leading-body-lg: 1.95;
  --leading-body: 1.9;
  --leading-small: 1.75;
  --leading-label: 1.4;

  /* Semantic tracking */
  --tracking-display: 0.08em;
  --tracking-heading: 0.06em;
  --tracking-body: 0.04em;
  --tracking-label: 0.16em;
  --tracking-micro: 0.12em;

  /* Spacing / MA scale */
  --space-0: 0;
  --space-1: 0.25rem;  /* 4px */
  --space-2: 0.5rem;   /* 8px */
  --space-3: 0.75rem;  /* 12px */
  --space-4: 1rem;     /* 16px */
  --space-5: 1.5rem;   /* 24px */
  --space-6: 2rem;     /* 32px */
  --space-7: 2.5rem;   /* 40px */
  --space-8: 3rem;     /* 48px */
  --space-9: 4rem;     /* 64px */
  --space-10: 5rem;    /* 80px */
  --space-11: 6rem;    /* 96px */
  --space-12: 8rem;    /* 128px */
  --space-13: 10rem;   /* 160px */

  /* Responsive layout */
  --page-max-width: 90rem; /* 1440px */
  --page-gutter: clamp(1.25rem, 0.5rem + 2.5vw, 4rem);
  --section-space-sm: clamp(3.5rem, 2.5rem + 3vw, 5rem);
  --section-space-md: clamp(4rem, 2.5rem + 5vw, 6rem);
  --section-space-lg: clamp(5rem, 2rem + 7vw, 8rem);
  --grid-columns-mobile: 4;
  --grid-columns-tablet: 8;
  --grid-columns-desktop: 12;
  --grid-gap-mobile: 0.75rem;
  --grid-gap-tablet: 1.25rem;
  --grid-gap-desktop: 1.5rem;

  /* Sizing */
  --size-touch-min: 2.75rem; /* 44px */
  --size-button-primary: 3.25rem;
  --size-button-secondary: 3rem;
  --size-button-compact: 2.5rem;
  --size-header-desktop: 5.5rem;
  --size-header-sticky: 4.5rem;
  --size-header-mobile: 4rem;
  --size-announcement: 1.75rem;
  --size-announcement-mobile: 2rem;

  /* Border */
  --border-width: 1px;
  --border-subtle: var(--border-width) solid var(--color-border-subtle);
  --border-default: var(--border-width) solid var(--color-border-default);
  --border-strong: var(--border-width) solid var(--color-border-strong);
  --radius-none: 0;
  --radius-circle: 999px;

  /* Elevation */
  --shadow-none: none;
  --shadow-overlay: 0 0.75rem 2rem var(--koh-charcoal-a08);

  /* Motion */
  --duration-instant: 100ms;
  --duration-fast: 180ms;
  --duration-button: 240ms;
  --duration-normal: 360ms;
  --duration-slow: 600ms;
  --duration-editorial: 800ms;
  --ease-standard: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-enter: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-exit: cubic-bezier(0.7, 0, 0.84, 0);

  /* Component aliases */
  --button-primary-bg: var(--koh-charcoal);
  --button-primary-bg-hover: var(--koh-charcoal-dark);
  --button-primary-bg-pressed: var(--koh-charcoal-deep);
  --button-primary-fg: var(--koh-off-white);
  --button-secondary-bg: transparent;
  --button-secondary-bg-hover: var(--koh-warm-ivory);
  --product-card-bg: var(--color-bg-primary);
  --product-media-bg: var(--color-bg-secondary);
  --hero-bg: var(--color-bg-primary);
  --hero-media-bg: var(--color-bg-secondary);
  --ingredient-bg: var(--color-accent-soft);
  --focus-ring: 2px solid var(--color-focus);
  --focus-offset: 3px;
}

/* Shopify Dawn aliases: map deliberately rather than replacing theme variables. */
.koh-scope {
  --color-background: 247, 245, 241;
  --color-foreground: 72, 68, 64;
  --color-button: 72, 68, 64;
  --color-button-text: 247, 245, 241;
  --color-secondary-button: 247, 245, 241;
  --color-secondary-button-text: 72, 68, 64;
  --color-link: 72, 68, 64;
  --color-badge-background: 225, 228, 220;
  --color-badge-foreground: 72, 68, 64;
  --media-radius: 0px;
  --text-boxes-radius: 0px;
  --buttons-radius: 0px;
  --inputs-radius: 0px;
}

/* Token-driven base type recipes */
.koh-display,
.koh-h1,
.koh-h2,
.koh-h3 {
  color: var(--color-text-primary);
  font-family: var(--font-heading);
  font-weight: var(--weight-regular);
  margin: 0;
}

.koh-display {
  font-size: var(--type-display);
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-display);
}

.koh-h1 {
  font-size: var(--type-h1);
  letter-spacing: var(--tracking-heading);
  line-height: var(--leading-heading);
}

.koh-h2 {
  font-size: var(--type-h2);
  letter-spacing: var(--tracking-heading);
  line-height: var(--leading-heading);
}

.koh-h3 {
  font-size: var(--type-h3);
  letter-spacing: 0.05em;
  line-height: 1.6;
}

.koh-body,
.koh-body-lg,
.koh-small,
.koh-label {
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  margin: 0;
}

.koh-body-lg {
  font-size: var(--type-body-lg);
  letter-spacing: var(--tracking-body);
  line-height: var(--leading-body-lg);
}

.koh-body {
  font-size: var(--type-body);
  letter-spacing: var(--tracking-body);
  line-height: var(--leading-body);
}

.koh-small {
  font-size: var(--type-small);
  letter-spacing: 0.06em;
  line-height: var(--leading-small);
}

.koh-label {
  font-size: var(--type-label);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-label);
  line-height: var(--leading-label);
  text-transform: uppercase;
}

/* Layout recipes */
.koh-container {
  box-sizing: border-box;
  margin-inline: auto;
  max-width: var(--page-max-width);
  padding-inline: var(--page-gutter);
  width: 100%;
}

.koh-grid {
  display: grid;
  gap: var(--grid-gap-mobile);
  grid-template-columns: repeat(var(--grid-columns-mobile), minmax(0, 1fr));
}

.koh-section {
  border-top: var(--border-subtle);
  padding-block: var(--section-space-md);
}

/* Accessible interaction recipes */
.koh-button {
  align-items: center;
  border: var(--border-strong);
  border-radius: var(--radius-none);
  cursor: pointer;
  display: inline-flex;
  font-family: var(--font-label);
  font-size: var(--type-button);
  font-weight: var(--weight-medium);
  justify-content: center;
  letter-spacing: var(--tracking-label);
  min-height: var(--size-touch-min);
  padding-inline: var(--space-5);
  text-decoration: none;
  text-transform: uppercase;
  transition:
    background-color var(--duration-button) var(--ease-standard),
    color var(--duration-button) var(--ease-standard),
    border-color var(--duration-button) var(--ease-standard),
    transform var(--duration-button) var(--ease-standard);
}

.koh-button--primary {
  background: var(--button-primary-bg);
  color: var(--button-primary-fg);
  min-height: var(--size-button-primary);
}

.koh-button--primary:hover {
  background: var(--button-primary-bg-hover);
}

.koh-button--primary:active {
  background: var(--button-primary-bg-pressed);
  transform: translateY(1px);
}

.koh-button--secondary {
  background: var(--button-secondary-bg);
  color: var(--color-text-primary);
  min-height: var(--size-button-secondary);
}

.koh-button--secondary:hover {
  background: var(--button-secondary-bg-hover);
}

.koh-button:focus-visible,
.koh-link:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

.koh-button[disabled],
.koh-button[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.4;
  pointer-events: none;
}

.koh-link {
  color: var(--color-text-primary);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
}

@media (min-width: 48rem) {
  .koh-grid {
    gap: var(--grid-gap-tablet);
    grid-template-columns: repeat(var(--grid-columns-tablet), minmax(0, 1fr));
  }
}

@media (min-width: 64rem) {
  .koh-grid {
    gap: var(--grid-gap-desktop);
    grid-template-columns: repeat(var(--grid-columns-desktop), minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-normal: 0ms;
    --duration-slow: 100ms;
    --duration-editorial: 100ms;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
  }
}