/**
 * SEIKETSU — Design tokens
 * Quiet luxury · Japanese minimalism · Editorial
 * Dark theme — warm charcoal / muted bronze
 * Prefix: --sk-
 */

:root {
  /* ——— Palette ——— */
  --sk-ivory: #1a1714;
  --sk-offwhite: #f2ebe3;
  --sk-charcoal: #12100e;
  --sk-brown: #8a6f4e;
  --sk-beige: #c4a882;
  --sk-bronze: #c4a882;

  --sk-ivory-deep: #26221e;
  --sk-sand: #2a2622;
  --sk-stone: #a89f94;
  --sk-muted: #a89f94;
  --sk-line: rgba(242, 235, 227, 0.12);
  --sk-line-strong: rgba(242, 235, 227, 0.2);
  --sk-line-soft: rgba(242, 235, 227, 0.06);
  --sk-overlay: rgba(18, 16, 14, 0.55);
  --sk-overlay-deep: rgba(18, 16, 14, 0.72);
  --sk-white: #1f1c19;
  --sk-ink-soft: rgba(242, 235, 227, 0.72);
  --sk-on-media: #f2ebe3;
  --sk-on-media-muted: rgba(242, 235, 227, 0.78);
  --sk-on-media-soft: rgba(242, 235, 227, 0.65);
  --sk-header-bg: rgba(18, 16, 14, 0.92);
  --sk-header-bg-solid: rgba(18, 16, 14, 0.97);
  --sk-elevated: #1f1c19;
  --sk-elevated-soft: #26221e;

  /* Semantic aliases */
  --sk-bg: #12100e;
  --sk-bg-alt: #1a1714;
  --sk-bg-warm: #1f1c19;
  --sk-text: #f2ebe3;
  --sk-text-muted: #a89f94;
  --sk-text-soft: #a89f94;
  --sk-text-inverse: #f2ebe3;
  --sk-accent: var(--sk-bronze);
  --sk-accent-deep: #a89070;
  --sk-border: var(--sk-line);
  --sk-border-strong: var(--sk-line-strong);
  --sk-surface: #1f1c19;
  --sk-focus: var(--sk-bronze);

  /* ——— Typography ——— */
  --font-display: "Libre Baskerville", "Instrument Serif", "Times New Roman", Georgia, serif;
  --font-jp: "Zen Old Mincho", "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --font-sans: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", "Helvetica Neue", sans-serif;

  --sk-fs-2xs: 0.625rem;
  --sk-fs-xs: 0.6875rem;
  --sk-fs-sm: 0.8125rem;
  --sk-fs-base: 1rem;
  --sk-fs-md: 1.0625rem;
  --sk-fs-lg: 1.1875rem;
  --sk-fs-xl: 1.375rem;
  --sk-fs-2xl: clamp(1.5rem, 2.4vw, 1.875rem);
  --sk-fs-3xl: clamp(1.875rem, 3.6vw, 2.75rem);
  --sk-fs-4xl: clamp(2.25rem, 5vw, 3.75rem);
  --sk-fs-5xl: clamp(2.75rem, 6.5vw, 4.75rem);
  --sk-fs-display: clamp(2.5rem, 7vw, 5.25rem);

  --sk-lh-tight: 1.15;
  --sk-lh-snug: 1.35;
  --sk-lh-base: 1.75;
  --sk-lh-loose: 1.9;

  --sk-track-tight: -0.02em;
  --sk-track-base: 0;
  --sk-track-wide: 0.12em;
  --sk-track-label: 0.22em;
  --sk-track-brand: 0.28em;

  --sk-fw-regular: 400;
  --sk-fw-medium: 500;
  --sk-fw-semibold: 600;

  /* ——— Spacing ——— */
  --sk-space-3xs: 0.125rem;
  --sk-space-2xs: 0.25rem;
  --sk-space-xs: 0.5rem;
  --sk-space-sm: 0.75rem;
  --sk-space-md: 1rem;
  --sk-space-lg: 1.5rem;
  --sk-space-xl: 2rem;
  --sk-space-2xl: 3rem;
  --sk-space-3xl: 4.5rem;
  --sk-space-4xl: 6.5rem;
  --sk-space-5xl: 8.5rem;

  --sk-section-y: clamp(3rem, 6.5vw, 5.5rem);
  --sk-section-y-sm: clamp(2.25rem, 4.5vw, 3.75rem);

  /* ——— Layout ——— */
  --sk-container: 1180px;
  --sk-container-narrow: 720px;
  --sk-container-wide: 1360px;
  --sk-container-pad: clamp(1.15rem, 3.2vw, 2rem);
  --sk-header-h: 4.5rem;
  --sk-header-h-scrolled: 3.65rem;
  --sk-gutter: clamp(1rem, 2.5vw, 1.75rem);

  /* ——— Radius (minimal — quiet luxury) ——— */
  --sk-radius-xs: 1px;
  --sk-radius-sm: 2px;
  --sk-radius-md: 3px;
  --sk-radius-lg: 4px;
  --sk-radius-pill: 999px;

  /* ——— Elevation (dark soft shadows) ——— */
  --sk-shadow-soft: 0 12px 32px rgba(0, 0, 0, 0.35);
  --sk-shadow-lift: 0 18px 48px rgba(0, 0, 0, 0.45);
  --sk-shadow-header: 0 1px 0 var(--sk-line-soft);

  /* ——— Motion ——— */
  --sk-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --sk-ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --sk-ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --sk-duration-fast: 180ms;
  --sk-duration: 420ms;
  --sk-duration-med: 600ms;
  --sk-duration-slow: 800ms;
  --sk-duration-hero: 900ms;

  /* ——— Z-index ——— */
  --sk-z-base: 1;
  --sk-z-sticky: 40;
  --sk-z-header: 80;
  --sk-z-nav: 90;
  --sk-z-search: 100;
  --sk-z-overlay: 110;
  --sk-z-skip: 200;

  /* Legacy-friendly aliases (non-prefixed helpers) */
  --color-bg: var(--sk-bg);
  --color-text: var(--sk-text);
  --color-accent: var(--sk-accent);
  --container-width: var(--sk-container);
  --container-padding: var(--sk-container-pad);
  --header-h: var(--sk-header-h);
  --ease-out: var(--sk-ease-out);
  --duration: var(--sk-duration);

  color-scheme: dark;
}

/* Reduced motion token overrides */
@media (prefers-reduced-motion: reduce) {
  :root {
    --sk-duration-fast: 1ms;
    --sk-duration: 1ms;
    --sk-duration-med: 1ms;
    --sk-duration-slow: 1ms;
    --sk-duration-hero: 1ms;
  }
}