/* Arigato Japan design tokens (Atlas Paper). Source: design/system/tokens.css, rules in
   .user/docs/DESIGN-GUIDELINE.md section A. Link BEFORE guide.css. One light theme, square by default. */
:root {
  /* ---- Colour: base ---- */
  --bg: #f3f3f0;
  --ink: #15161b;
  --ink2: #3a3b42;
  --mute: #6b6c75;
  --white: #fff;
  /* THE one brand red: 5.95:1 on paper, text-safe. Hover, focus ring, No.NN labels, links, fills. */
  --red: #bc002d;
  --acc: var(--red);
  --sun: var(--red);
  /* The only second red: --red is 2.8:1 on ink, so on ink bands the sun lightens. */
  --sun-on-dark: #d7193f;
  --on-dark-mute: #d6d7dc;
  --on-dark-rule: #f3f3f026;
  /* ---- Colour: rules and edges ---- */
  --rule: #15161b26;
  --rule-strong: #15161b59;
  --rule-dot: #15161b40;
  --tint-hover: #15161b08;
  --tint-on: #15161b0f;
  --scrim: #15161b73;
  --grab: #15161b4d;
  /* ---- Colour: Can-I verdicts (word + dot, never colour alone) ---- */
  --v-yes: #1f8a4c;
  --v-if: #8a6100;
  --v-no: #6b2316;
  --v-dep: #3f5478;
  /* ---- Colour: hub accents, keyed by hub id. Dots, rules, underlines only: never text or fills ---- */
  --hub-destinations: #9b82ff;
  --hub-japow: #8fc7ff;
  --hub-onsen: #ffb066;
  --hub-wild-trek: #22c1ae;
  --hub-drift: #ff3d8b;
  --hub-culture: #f2685c;
  --hub-anime-manga: #ffd23f;
  --hub-plan: #b9c6dd;
  /* Food: proposed, owner to confirm (design/system/specs/nine-hubs.md). */
  --hub-food: #8db255;
  /* ---- Colour: 9 region tints (map fills, route tiles) ---- */
  --region-tokyo: #e6dccd;
  --region-hokkaido: #cfe0f2;
  --region-tohoku: #d8e4cc;
  --region-chubu: #c9e5de;
  --region-kansai: #f1d7d2;
  --region-chugoku: #e6d9ec;
  --region-shikoku: #efe4c2;
  --region-kyushu: #d4e8ee;
  --region-okinawa: #cdeadb;

  /* ---- Type: families. Self-hosted subsets in public/guide/fonts (Zen Old Mincho, IBM Plex Mono, Noto Serif JP; SIL OFL). ---- */
  --f1: "Zen Old Mincho", Georgia, serif;
  --f2: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --fj: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --w-body: 400;
  --w-head: 500;
  --w-bold: 700;
  --w-label: 500;
  --w-kanji: 900;
  --track-label: 0.08em;
  --track-tight: 0.06em;
  --track-head: -0.02em;
  --lh-body: 1.5;
  --lh-prose: 1.8;
  --lh-tight: 1.05;
  --lh-card: 1.55;
  --fs-mono-2xs: 8.5px;
  --fs-mono-xs: 10px;
  --fs-mono-s: 11px;
  --fs-mono: 12px;
  --fs-mono-l: 13px;
  --fs-body-xs: 12.5px;
  --fs-body-s: 14px;
  --fs-body-m: 15px;
  --fs-body: 16px;
  --fs-body-l: 1.05rem;
  --fs-h4: 19px;
  --fs-h3: 30px;
  --fs-h2: clamp(1.75rem, 4vw, 2.75rem);
  --fs-h2-l: clamp(2rem, 5vw, 3.5rem);
  --fs-title: clamp(2rem, 6vw, 3.5rem);
  --fs-h1-hub: clamp(2.2rem, 5.4vw, 4.6rem);
  --fs-region: clamp(3.25rem, 8vw, 6.5rem);
  --fs-kana: min(16.4vw, 236px);

  /* ---- Space ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --pad: clamp(1rem, 3vw, 2.5rem);
  --gut: clamp(1rem, 3vw, 2rem);
  --max: 78rem;
  --measure: 38rem;
  --measure-wide: 44rem;
  --hh: 64px;
  --target: 44px;
  --bar-h: 72px;

  /* ---- Shape: square; round only dots and discs ---- */
  --radius-none: 0;
  --radius-dot: 50%;
  --bw-1: 1px;
  --bw-2: 2px;
  --bw-3: 3px;
  --bw-4: 4px;
  --bw-pill: 6px;
  --focus: 2px solid var(--acc);
  --focus-offset: 3px;
  --dot-s: 8px;
  --dot-m: 10px;
  --dot-l: 12px;
  /* Owner flags (open decisions): footer wordmark height (18px, or 20px per DIRECTION.md). */
  --footer-mark: 18px;

  /* ---- Motion ---- */
  --t-fast: 0.15s;
  --t-ui: 0.2s;
  --t-base: 0.25s;
  --t-slow: 0.35s;
  --t-img: 0.6s;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-line: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-pop: cubic-bezier(0.3, 1.8, 0.4, 1);
  --t-settle: 1.2s;

  /* ---- Lantern: colour copy of a B&W photo grid under a radial mask that follows the pointer ---- */
  --lantern-rad: 240px;
  --lantern-rad-tablet: 180px;
  --lantern-rad-phone: 130px;
  --lantern-sun: 84px;
  --lantern-sun-tablet: 64px;
  --lantern-sun-phone: 48px;
  --lantern-gray: grayscale(1) contrast(1.08) brightness(1.04);
  --photo-gray: grayscale(1);

  /* ---- Layers ---- */
  --z-top: 50;
  --z-scrim: 55;
  --z-sheet: 58;
  --z-pbar: 60;
  --z-xn: 70;
  --z-skip: 999;
}
@media (max-width: 599px) {
  :root {
    --hh: 52px;
    --pad: 16px;
  }
}

/* One focus ring (zero specificity: component rules still win). */
:where(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
  outline: var(--focus);
  outline-offset: var(--focus-offset);
}

/* Windows (panels, sheets, banners): flat paper, 1px ink border, no shadow, no radius. The class names are
   the earlier glass tiers, kept because markup and public/guide/consent.js use them. */
.glass-regular,
.glass-thick {
  background: var(--bg);
  border: 1px solid var(--ink);
}
@media (forced-colors: active) {
  .glass-regular,
  .glass-thick {
    background: Canvas;
    color: CanvasText;
    border: 1px solid CanvasText;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}