/* ==========================================================================
   Japan Phone Guide — Design tokens
   "藍と生成り" — deep indigo (navy) on warm paper, with serif (明朝) headings.
   Restrained, editorial, public-service. Hairline rules over drop shadows.
   Semantic status is always icon + word + tone, never colour alone.
   ========================================================================== */

:root {
  /* ---- Sumi ink (warm near-black) ------------------------------------ */
  --ink-900: #1b1a17;   /* headings */
  --ink-800: #29271f;
  --ink-700: #3b3830;   /* strong body text */
  --ink-600: #55514a;   /* body text */
  --ink-500: #6f6a5f;   /* secondary text */
  --ink-400: #928c7e;   /* muted */
  --ink-300: #b8b1a1;
  --ink-200: #d9d2c2;

  --line: #e4ddcc;         /* hairline on paper */
  --line-strong: #cfc7b3;
  --rule: #23324d;         /* the "帯" indigo rule */

  /* ---- Washi / paper surfaces -------------------------------------- */
  --surface: #fffefb;          /* reading surface / cards (barely warm white) */
  --surface-raised: #fffefb;
  --paper: #f6f1e6;            /* page background — 生成り */
  --surface-sunken: #efe8d7;   /* deeper paper */
  --surface-muted: #ece4d1;
  --surface-accent: #eef0f1;   /* faint cool tint panel */
  --surface-indigo: #eceff4;   /* faint indigo wash */
  --surface-inverse: #1c2b45;  /* deep indigo panel */

  /* ---- Ai / kon — indigo navy (primary) --------------------------- */
  --primary-900: #101d33;
  --primary-800: #182741;
  --primary-700: #22304d;     /* links, accent text on paper */
  --primary-600: #26385a;     /* primary button */
  --primary-500: #3a4f78;
  --primary-400: #566a92;
  --primary-200: #a7b2c6;
  --primary-100: #d3d9e3;
  --primary-50:  #eceef3;

  --ink-on-primary: #fbfaf6;

  /* ---- Shu — vermilion seal accent (used rarely) ------------------ */
  --seal-700: #973124;
  --seal-600: #ac3a2b;
  --seal-100: #f0d8d1;
  --seal-50:  #f8ece8;

  /* ---- Status: available / full --------------------------------- */
  --ok-700: #1e5a3d;
  --ok-600: #256b49;
  --ok-100: #d7e6db;
  --ok-50:  #ecf3ed;

  /* ---- Status: limited / paid / caution ------------------------- */
  --warn-800: #6a4a12;
  --warn-700: #8a5f16;
  --warn-100: #efe1c3;
  --warn-50:  #f7efdd;

  /* ---- Status: not available / stop --------------------------- */
  --stop-700: #8c2f25;
  --stop-600: #a5382c;
  --stop-100: #eed6d1;
  --stop-50:  #f6eae7;

  /* ---- Status: info / online (folded into the indigo) --------- */
  --info-800: #1b2b45;
  --info-700: #22304d;
  --info-100: #d3d9e3;
  --info-50:  #eceef3;

  /* ---- Focus --------------------------------------------------- */
  --focus-ring: 0 0 0 3px rgba(38, 56, 90, 0.32);
  --focus-color: var(--primary-600);

  /* ---- Typography -------------------------------------------- */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", "Noto Sans JP",
    "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo,
    "Noto Sans Sinhala", "Noto Sans Devanagari", "Noto Sans CJK SC", sans-serif;
  --font-jp: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo,
    var(--font-sans);
  --font-serif: "Noto Serif", "Shippori Mincho", "Noto Serif JP",
    "Hiragino Mincho ProN", "Yu Mincho", Georgia, "Times New Roman", serif;
  --font-serif-jp: "Shippori Mincho", "Noto Serif JP", "Hiragino Mincho ProN",
    "Yu Mincho", "Noto Serif", serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;

  --text-2xs: 0.75rem;
  --text-xs: 0.8125rem;
  --text-sm: 0.9375rem;
  --text-base: 1.0625rem;
  --text-lg: 1.1875rem;
  --text-xl: 1.35rem;
  --text-2xl: clamp(1.5rem, 1.22rem + 1.3vw, 1.9rem);
  --text-3xl: clamp(1.75rem, 1.42rem + 1.5vw, 2.35rem);
  --text-4xl: clamp(2rem, 1.62rem + 1.8vw, 2.9rem);

  --leading-tight: 1.28;
  --leading-snug: 1.4;
  --leading-normal: 1.6;
  --leading-relaxed: 1.78;

  --tracking-tight: 0;
  --tracking-normal: 0;
  --tracking-wide: 0.03em;
  --tracking-eyebrow: 0.18em;

  /* ---- Space ---------------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 2rem;
  --space-8: 2.5rem;
  --space-9: 3rem;
  --space-10: 4rem;
  --space-11: 5rem;
  --space-12: 6.5rem;

  /* ---- Radius (restrained — this is a document, not an app) --- */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 9px;
  --radius-xl: 12px;
  --radius-pill: 999px;

  /* ---- Shadow (very light — borders do the work) ------------- */
  --shadow-xs: 0 1px 1px rgba(27, 26, 23, 0.04);
  --shadow-sm: 0 1px 2px rgba(27, 26, 23, 0.05);
  --shadow-md: 0 2px 10px rgba(27, 26, 23, 0.07);
  --shadow-lg: 0 10px 34px rgba(27, 26, 23, 0.12);
  --shadow-focus: var(--focus-ring);

  /* ---- Layout ------------------------------------------- */
  --content-max: 1120px;
  --reading-max: 760px;
  --header-h: 62px;
  --bottomnav-h: 66px;
  --page-pad-x: clamp(1rem, 0.4rem + 2.6vw, 2.5rem);

  --z-header: 60;
  --z-bottomnav: 60;
  --z-dropdown: 80;
  --z-overlay: 200;
  --z-toast: 300;

  --transition-fast: 120ms ease;
  --transition: 200ms ease;

  /* ---- 麻の葉 (asanoha) hairline pattern — used at low opacity --- */
  --asanoha: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='104' viewBox='0 0 60 104'%3E%3Cg fill='none' stroke='%2322304d' stroke-width='1'%3E%3Cpath d='M30 0v26M30 26 7.5 39M30 26 52.5 39M7.5 39v26M52.5 39v26M30 52 7.5 39M30 52 52.5 39M30 52v26M30 52 7.5 65M30 52 52.5 65M7.5 65 30 78M52.5 65 30 78M30 78v26M0 13v26M60 13v26M0 39 30 52M60 39 30 52M0 65v26M60 65v26M0 65 30 78M60 65 30 78'/%3E%3C/g%3E%3C/svg%3E");
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}