/* =========================================================
   Enagic Japan - Prototype Design Tokens
   ---------------------------------------------------------
   Design brief: Corporate website overhaul for a premier
   Japanese medical device manufacturer. Tone: "安心感"
   (peace of mind / trustworthiness), restrained & precise.
   Dials (taste-skill): VARIANCE 5 / MOTION 4 / DENSITY 5
   Implementation: Native vanilla CSS custom properties.

   Guiding principles:
   - Primary brand accent: Official Enagic deep navy (#12085f,
     extracted from live site stylesheet).
   - pH indicators are pure DATA colors (matching physical
     machine front panel), strictly scoped to water selector.
   - Border radii: 8px for controls/inputs/badges, 16px for
     cards/surfaces/images. Clean & consistent.
   ========================================================= */

:root {
  color-scheme: light dark;

  /* Brand */
  --brand: #12085f;
  --brand-strong: #0c0545;
  --brand-tint: #eceafb;
  --on-brand: #ffffff;

  /* Neutrals (cool slate palette) */
  --surface: #fbfcfe;
  --surface-2: #f2f5fa;
  --surface-3: #e9eef6;
  --plate: #eef3f9;
  --ink: #141a2e;
  --ink-2: #3d4560;
  --ink-3: #5a6380;
  --line: #dde3ee;
  --line-strong: #c5cddd;

  /* pH data colors (matching physical Leveluk front panel) */
  --ph-110: #1d3f9a;
  --ph-095: #2b6cc9;
  --ph-070: #23875a;
  --ph-060: #b8741c;
  --ph-025: #c4472a;

  /* Typography:
     Latin & Numerals: Outfit / Japanese: Zen Kaku Gothic New
     Production: self-host webfonts (@font-face with font-display: swap). */
  --font-sans: "Outfit", "Zen Kaku Gothic New", "Hiragino Sans",
    "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
  --font-num: "Outfit", "Zen Kaku Gothic New", sans-serif;

  --fs-xs: 0.8125rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --fs-xl: clamp(1.625rem, 1.3rem + 1.4vw, 2.25rem);
  --fs-2xl: clamp(2.5rem, 1.6rem + 4vw, 4.5rem);

  --lh-body: 1.85;
  --lh-tight: 1.4;
  --ls-body: 0.04em;
  --ls-head: 0.06em;

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --section-y: clamp(4rem, 2.5rem + 6vw, 7rem);
  --gutter: clamp(1.25rem, 0.8rem + 2.5vw, 2.5rem);
  --container: 1200px;

  /* Shape */
  --r-sm: 8px;
  --r-lg: 16px;

  /* Elevation (tinted shadows, never pure black) */
  --shadow-1: 0 1px 2px rgb(18 8 95 / 0.06), 0 4px 16px rgb(18 8 95 / 0.06);
  --shadow-2: 0 2px 6px rgb(18 8 95 / 0.08), 0 18px 48px rgb(18 8 95 / 0.10);

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-1: 160ms;
  --dur-2: 320ms;
  --dur-3: 640ms;

  /* Layers */
  --z-header: 40;
  --z-bottombar: 45;
  --z-drawer: 50;
  --z-skip: 60;

  --header-h: 72px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --brand: #aab3ff;
    --brand-strong: #c3c9ff;
    --brand-tint: #1d2147;
    --on-brand: #0c0545;

    --surface: #0d1020;
    --surface-2: #131830;
    --surface-3: #1a2040;
    --plate: #eef3f9; /* Product photos have white background: plate remains clean light surface */
    --ink: #eef1f8;
    --ink-2: #bcc4d9;
    --ink-3: #959eb8;
    --line: #262d4a;
    --line-strong: #353e60;

    --ph-110: #7d9cf0;
    --ph-095: #6aa6f2;
    --ph-070: #5cc792;
    --ph-060: #e6a654;
    --ph-025: #f08566;

    --shadow-1: 0 1px 2px rgb(0 0 0 / 0.3), 0 4px 16px rgb(0 0 0 / 0.25);
    --shadow-2: 0 2px 6px rgb(0 0 0 / 0.35), 0 18px 48px rgb(0 0 0 / 0.35);
  }
}