/*
 * Lion Express design tokens (renewal 2026).
 * Contract: docs/renewal/DESIGN.md. Component CSS uses these variables only.
 * Mobile-first: the defaults are the SP values; PC values switch at 768px.
 */
@font-face {
  font-family: "Inter Tight";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/inter-tight/inter-tight-latin-400.woff2") format("woff2");
  unicode-range: U+0020-007E, U+00A0;
}

/* Light numerals only (#171): the home 01/02/03 flow and category numbers declare 300.
   Digits-only subset of Inter Tight Light (OFL, see fonts/inter-tight/OFL.txt), ~3 KB;
   the browser fetches it only when a 300-weight digit is painted. */
@font-face {
  font-family: "Inter Tight";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/inter-tight/inter-tight-digits-300.woff2") format("woff2");
  unicode-range: U+0030-0039;
}

@font-face {
  font-family: "Inter Tight";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/inter-tight/inter-tight-latin-500.woff2") format("woff2");
  unicode-range: U+0020-007E, U+00A0;
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono/ibm-plex-mono-caps-400.woff2") format("woff2");
  unicode-range: U+0020-0021, U+0028-0029, U+002B-003B, U+0041-005A, U+0061-007A, U+2190, U+2192, U+2713;
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono/ibm-plex-mono-caps-500.woff2") format("woff2");
  unicode-range: U+0020-0021, U+0028-0029, U+002B-003B, U+0041-005A, U+0061-007A, U+2190, U+2192, U+2713;
}

:root {
  /* Color — roles are binding (see DESIGN.md §3) */
  --lx-deep: #0e3b38;
  --lx-ink: #0b1514;
  --lx-body: #2f3837;
  --lx-muted: #5a6563;
  --lx-link: #1d615d;
  --lx-logo: #4a8784;
  --lx-amber: #f5a524;
  --lx-amber-hover: #e8940c;
  --lx-paper: #ffffff;
  --lx-fog: #eef3f2;
  --lx-mist: #ddeeeb;
  --lx-line: #d3dcda;
  --lx-field: #86928f;
  --lx-error: #c0352f;
  --lx-error-wash: #fcedec;
  --lx-night: #072321;
  --lx-sea: #12514c;
  --lx-dot: rgba(150, 205, 196, 0.34);
  --lx-on-deep: rgba(255, 255, 255, 0.78);

  /* Accents (v2.2). Amber stays the only action colour; these add warmth and orientation.
     ocean: depth of the hero. mint / sky / coral / sun: small marks on deep backgrounds only
     (icons, map dots, routes), never text on white. washes: quiet section surfaces. */
  --lx-ocean: #0b3346;
  --lx-ocean-night: #071f2e;
  --lx-mint: #7fe0c6;
  --lx-sky: #7cc8ec;
  --lx-coral: #ff8a70;
  --lx-sun: #ffd27a;
  --lx-wash-mint: #eaf6f1;
  --lx-wash-sky: #ecf5fb;

  /* Category tones (v2.2): ink = text/icons on white or on its tint (>= 4.5:1),
     tint = surfaces, bright = marks on deep backgrounds. Mapped by .lx-tone-* classes. */
  --lx-tone-ed: #2b5fb4;
  --lx-tone-ed-tint: #e9f0fc;
  --lx-tone-ed-bright: #8fb5ff;
  --lx-tone-diet: #2f7a4c;
  --lx-tone-diet-tint: #e6f5ea;
  --lx-tone-diet-bright: #8fe0a8;
  --lx-tone-hair: #8a560c;
  --lx-tone-hair-tint: #fbf1de;
  --lx-tone-hair-bright: #ffcf7a;
  --lx-tone-skin: #ad3567;
  --lx-tone-skin-tint: #fcecf2;
  --lx-tone-skin-bright: #ff9fc4;
  --lx-tone-dental: #1a6f88;
  --lx-tone-dental-tint: #e4f4fa;
  --lx-tone-dental-bright: #7fd6f0;
  --lx-tone-supple: #ad5217;
  --lx-tone-supple-tint: #fdeee3;
  --lx-tone-supple-bright: #ffb07a;

  /* Weights: display/heading stay light; 700 is the heaviest weight in the system */
  --lx-w-display: 500;
  --lx-w-heading: 700;
  --lx-w-label: 500;

  /* Type */
  /* Japanese: Hiragino Kaku Gothic where installed (Apple devices); Noto Sans JP, the closest webfont, elsewhere. */
  --lx-font: "Inter Tight", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", Meiryo, sans-serif;
  --lx-font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --lx-text-display: 36px;
  --lx-text-h1: 28px;
  --lx-text-h2: 24px;
  --lx-text-h3: 20px;
  --lx-text-h4: 18px;
  --lx-text-body-lg: 17px;
  --lx-text-body: 16px;
  --lx-text-small: 14px;
  --lx-text-price-lg: 30px;
  --lx-text-price: 18px;
  --lx-lh-display: 1.32;
  --lx-lh-heading: 1.5;
  --lx-lh-body: 1.85;
  --lx-lh-small: 1.6;
  --lx-track-body: 0.03em;
  --lx-track-heading: 0.03em;
  --lx-track-display: 0.04em;

  /* Space (4px base) */
  --lx-s-1: 4px;
  --lx-s-2: 8px;
  --lx-s-3: 12px;
  --lx-s-4: 16px;
  --lx-s-5: 20px;
  --lx-s-6: 24px;
  --lx-s-7: 32px;
  --lx-s-8: 40px;
  --lx-s-9: 48px;
  --lx-s-10: 64px;
  --lx-s-11: 80px;

  /* Layout */
  --lx-content-max: 1200px;
  --lx-gutter: 16px;
  --lx-section-gap: 56px;
  --lx-card-pad: 16px;
  --lx-header-h: 56px;

  /* Shape and depth */
  --lx-radius-pill: 9999px;
  --lx-radius-card: 10px;
  --lx-radius-panel: 28px;
  --lx-radius-check: 4px;
  --lx-hairline: 1px solid var(--lx-line);
  --lx-shadow-float: 0 6px 20px rgba(11, 21, 20, 0.08);
  --lx-overlay: rgba(11, 21, 20, 0.32);
  --lx-focus: 3px solid var(--lx-deep);
  --lx-focus-offset: 2px;

  /* Controls */
  --lx-control-h: 52px;
  --lx-touch: 44px;

  /* Motion */
  --lx-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --lx-dur-fast: 150ms;
  --lx-dur: 220ms;
  --lx-dur-slow: 300ms;
}

@media (min-width: 768px) {
  :root {
    --lx-text-display: 68px;
    --lx-text-h1: 36px;
    --lx-text-h2: 28px;
    --lx-text-h3: 22px;
    --lx-text-body-lg: 18px;
    --lx-text-price-lg: 36px;
    --lx-text-price: 20px;
    --lx-gutter: 24px;
    --lx-section-gap: 80px;
    --lx-card-pad: 24px;
    --lx-header-h: 80px;
    --lx-control-h: 48px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --lx-dur-fast: 0ms;
    --lx-dur: 0ms;
    --lx-dur-slow: 0ms;
  }
}