/* src/styles/tokens.css — design tokens: "sumi ink on washi".
   The ONLY file with raw colour values. Everything else uses var(--token).
   Source: docs/research/2026-09-29-visual-language.txt (LIGHT / DARK / MOTION). */

:root {
  color-scheme: light;

  /* ── Paper & ink ───────────────────────────────────────────── */
  --bg: #F6F1E7;              /* washi page */
  --surface: #FDFAF4;         /* cards, sheets, tab bar, inputs */
  --surface-inset: #EDE6D8;   /* address blocks, pills, segmented track — use --text-2 on it */
  --surface-pressed: #E4DCCB; /* pressed / hover / selected row */
  --text: #1F1D1A;            /* sumi — primary text, primary button fill, focus ring */
  --text-2: #4F4A42;          /* secondary text, default icon colour */
  --text-3: #6E675C;          /* meta, eyebrows, placeholders, interactive borders */
  --line: #E2D9C8;            /* hairlines, card borders (decorative) */
  --line-strong: #C9BEA9;     /* dashed TBD boxes, chip outlines, perforation */

  /* ── Shu 朱: "you are here" (now, today, GPS) + stamps. Nothing else. ── */
  --accent: #BD3A2C;
  --accent-text: #A3301F;
  --accent-wash: #F6E1DC;
  --on-accent: #FDFAF4;

  /* ── Countdown hero "cover" ─────────────────────────────────── */
  --hero-bg: #1F1D1A;
  --hero-text: #F6F1E7;
  --hero-text-2: #B9B0A1;
  --hero-line: rgba(246, 241, 231, .18);
  --hero-ridge: rgba(246, 241, 231, 1); /* used through a mask at 6–10% */

  /* ── Good-to-know caveats (the only yellow) ─────────────────── */
  --note-bg: #F7EBC8;
  --note-text: #6B4E00;

  /* ── Taxi / show cards: white in both themes (the reader is the driver) ── */
  --show-bg: #FFFFFF;
  --show-text: #111111;
  --show-text-2: #555555;
  --show-text-3: #666666;
  --show-line: #DDDDDD;

  /* ── Regions: fill (white text ≥ 4.5:1), ink (text/rails on --bg), wash (tints) ── */
  --r-travel: #5F5B55;   --r-travel-ink: #5F5B55;   --r-travel-wash: #ECE7DE;
  --r-indigo: #283F6E;    --r-indigo-ink: #283F6E;    --r-indigo-wash: #E4E9F2;
  --r-moss: #566B24;   --r-moss-ink: #566B24;   --r-moss-wash: #EAEDDA;
  --r-coast: #17707F;    --r-coast-ink: #17707F;    --r-coast-wash: #DDEDEF;
  --r-ochre: #8F5409; --r-ochre-ink: #8F5409; --r-ochre-wash: #F4E7D2;  /* kincha ochre */
  --r-violet: #6B4F96;    --r-violet-ink: #6B4F96;    --r-violet-wash: #E9E4F2;     /* fuji purple */
  --r-umber: #6F3E26;    --r-umber-ink: #6F3E26;    --r-umber-wash: #F5E4D8;    /* fired-clay umber, white-peach wash */
  --r-pine: #1F6E50;     --r-pine-ink: #1F6E50;     --r-pine-wash: #E0EEE5;     /* tokiwa evergreen, misty wash (kept clear of the teal tone) */
  --r-open: #6E675C;     --r-open-ink: #6E675C;     --r-open-wash: #EEE8DD;      /* undecided: dashed outline */
  --r-plum: #7D3345; --r-plum-ink: #7D3345; --r-plum-wash: #F1E1E4;  /* azuki */

  --on-tone: #FDFAF4;    /* text/glyphs on a region fill (both themes) */

  /* ── Foliage (season outlook): beni crimson for maple (momiji), gold for ginkgo (icho). Never shu.
     Crimson sits between shu (more orange) and the plum region (darker, greyer); the gold is yellower
     than the ochre region and stronger than the caveat note. -ink is text on --bg/--surface (≥ 5.5:1),
     -wash is a quiet tint for peak chips (no more saturated than the caveat note), the plain token is a fill (peak
     blocks, the highlight cards' top band) and glyph. --season-here: how much region ink tints "your days" on the
     foliage front (stronger in the dark, where the washes sit too close to the paper). ── */
  --leaf-red: #B42A4C;    --leaf-red-ink: #A3223F;    --leaf-red-wash: #F3D8DA;
  --leaf-yellow: #D6A315; --leaf-yellow-ink: #735E00; --leaf-yellow-wash: #F2E4B4;
  --season-here: 13%;

  /* Default tone (overridden by .tone-<tone> classes, see bottom of file). */
  --tone: var(--r-open);
  --tone-ink: var(--r-open-ink);
  --tone-wash: var(--r-open-wash);

  /* ── Effects ────────────────────────────────────────────────── */
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--text);   /* never shu */
  --scrim: rgba(31, 29, 26, .44);
  --shadow-sheet: 0 -1px 0 rgba(31, 29, 26, .06), 0 -12px 32px rgba(31, 29, 26, .14);
  --shadow-panel: -1px 0 0 rgba(31, 29, 26, .06), -12px 0 32px rgba(31, 29, 26, .12);
  --shadow-float: 0 2px 8px rgba(31, 29, 26, .16);
  --sheet-edge: transparent;       /* dark mode swaps shadows for a hairline */
  --grain-opacity: .035;
  --motif-opacity: .14;
  --mask-ink: #000;      /* opaque stop for mask gradients (alpha only) */

  /* ── Type ───────────────────────────────────────────────────── */
  --font-serif: 'Newsreader', 'Iowan Old Style', Georgia, serif;
  --font-sans: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  /* Japanese: iOS/macOS system faces only (no CJK webfont ships). Yu/Noto are desktop fallbacks. */
  --font-jp: 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic UI', 'Noto Sans JP', sans-serif;
  --font-mincho: 'Hiragino Mincho ProN', 'Yu Mincho', 'Noto Serif JP', serif;

  /* size / line-height pairs */
  --fs-hero: 96px;     --lh-hero: 88px;      /* countdown numeral (120px ≥1024) */
  --fs-display: 34px;  --lh-display: 38px;   /* large screen titles */
  --fs-title-1: 26px;  --lh-title-1: 30px;   /* sheet titles */
  --fs-chapter: 28px;  --lh-chapter: 32px;   /* chapter-opener region names */
  --fs-title-2: 22px;  --lh-title-2: 28px;   /* day / stay card titles */
  --fs-title-3: 18px;  --lh-title-3: 24px;   /* place rows */
  --fs-aside: 15px;    --lh-aside: 22px;     /* italic asides */
  --fs-body: 16px;     --lh-body: 24px;
  --fs-small: 14px;    --lh-small: 20px;
  --fs-caption: 13px;  --lh-caption: 18px;
  --fs-label: 12px;    --lh-label: 16px;     /* eyebrows, uppercase .08em */
  --fs-micro: 11px;    --lh-micro: 14px;     /* hard floor */
  --fs-time: 15px;     --lh-time: 20px;
  --fs-time-lg: 17px;  --lh-time-lg: 22px;
  --fs-code: 34px;     --lh-code: 36px;      /* IATA codes */
  --fs-stat: 24px;     --lh-stat: 28px;
  --fs-jp-body: 15px;  --lh-jp-body: 26px;
  --fs-jp-large: 18px; --lh-jp-large: 30px;
  --track-label: .08em;
  --track-section: .12em;

  /* ── Space (4-pt) ───────────────────────────────────────────── */
  --s-0: 2px; --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px;
  --s-6: 24px; --s-7: 32px; --s-8: 40px; --s-9: 56px; --s-10: 72px;
  --gutter: 16px;          /* 20 ≥400px, 32 ≥1024px (base.css) */
  --card-pad: 16px;
  --card-gap: 12px;
  --section-gap: 40px;

  /* ── Radii ──────────────────────────────────────────────────── */
  --r-1: 4px;     /* region chips, tags, stamps, now-time pill */
  --r-2: 8px;     /* buttons, inputs, inset blocks, TBD boxes */
  --r-3: 12px;    /* cards, boarding passes, chapter openers */
  --r-4: 16px;    /* sheet top corners, hero bottom corners */
  --r-pill: 999px;

  /* ── Layout ─────────────────────────────────────────────────── */
  --tap-min: 44px;
  --header-h: 52px;
  --tabbar-h: 56px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --tabbar-total: calc(var(--tabbar-h) + var(--safe-bottom));
  --content-max: 720px;
  --sidenav-w: 240px;
  --sheet-max: 560px;
  --panel-w: 440px;

  --z-header: 10;
  --z-tabbar: 20;
  --z-float: 25;
  --z-scrim: 30;
  --z-sheet: 31;
  --z-fullscreen: 40;
  --z-toast: 50;

  /* ── Motion ─────────────────────────────────────────────────── */
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 280ms;
  --dur-sheet: 380ms;
  --dur-sheet-out: 260ms;
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --ease-sheet: cubic-bezier(.32, .72, 0, 1);
  --ease-in-out: cubic-bezier(.4, 0, .2, 1);

  /* ── Motif masks (black = ink). Used by .motif-* in components.css. ── */
  --motif-lattice: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='10' viewBox='0 0 30 10'%3E%3Cpath d='M0 0h2v10H0zM6 0h1v10H6zM12 0h1v10h-1zM18 0h1v10h-1zM24 0h1v10h-1z'/%3E%3C/svg%3E");  /* tile 30px 10px */
  --motif-waves: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1' d='M0.5 20a19.5 19.5 0 0 1 39 0 M6.5 20a13.5 13.5 0 0 1 27 0 M12.5 20a7.5 7.5 0 0 1 15 0 M-19.5 40a19.5 19.5 0 0 1 39 0 M-13.5 40a13.5 13.5 0 0 1 27 0 M-7.5 40a7.5 7.5 0 0 1 15 0 M20.5 40a19.5 19.5 0 0 1 39 0 M26.5 40a13.5 13.5 0 0 1 27 0 M32.5 40a7.5 7.5 0 0 1 15 0'/%3E%3C/svg%3E");  /* tile 40px 40px */
  --motif-ridges: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='100' viewBox='0 0 400 100' preserveAspectRatio='none'%3E%3Cpath fill-opacity='.28' d='M0 58C30 50 50 36 80 40S130 58 165 44 220 22 260 34 330 56 400 40V100H0z'/%3E%3Cpath fill-opacity='.55' d='M0 72C40 60 70 52 110 60S170 74 210 62 280 46 320 58 370 70 400 64V100H0z'/%3E%3Cpath d='M0 86C50 78 90 70 130 76S200 90 250 80 330 70 400 82V100H0z'/%3E%3C/svg%3E");  /* tile 100% 100% */
  --motif-pearls: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1'%3E%3Ccircle cx='6' cy='6' r='2.5'/%3E%3Ccircle cx='18' cy='18' r='2.5'/%3E%3C/g%3E%3C/svg%3E");  /* tile 24px 24px */
  --motif-tide: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='14' viewBox='0 0 32 14'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1' d='M0 4.5c4-3 12-3 16 0s12 3 16 0M0 11.5c4-3 12-3 16 0s12 3 16 0'/%3E%3C/svg%3E");  /* tile 32px 14px */
  --motif-asanoha: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='27.713' viewBox='0 0 16 27.713'%3E%3Cpath fill='none' stroke='%23000' stroke-width='.8' d='M0 0L16 0M0 13.857L16 13.857M0 27.713L16 27.713M0 0L16 27.713M16 0L0 27.713M-8 -13.857L8 13.857M8 13.857L16 27.713M16 0L24 13.857M-8 13.857L0 27.713M0 0L-8 13.857M24 13.857L16 27.713M8 4.619L0 0M8 4.619L16 0M8 4.619L8 13.857M0 9.238L0 0M0 9.238L8 13.857M0 9.238L-8 13.857M16 9.238L16 0M16 9.238L24 13.857M16 9.238L8 13.857M8 23.094L8 13.857M8 23.094L0 27.713M8 23.094L16 27.713M0 18.476L-8 13.857M0 18.476L8 13.857M0 18.476L0 27.713M16 18.476L8 13.857M16 18.476L24 13.857M16 18.476L16 27.713'/%3E%3C/svg%3E");  /* tile 16px 27.713px */
  --motif-tasuki: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'%3E%3Cg fill='none' stroke='%23000' stroke-width='1'%3E%3Cpath d='M-44-44c18.48 7.04 25.52 36.96 44 44s25.52 36.96 44 44 25.52 36.96 44 44M0-44c18.48 7.04 25.52 36.96 44 44s25.52 36.96 44 44M-44 0c18.48 7.04 25.52 36.96 44 44s25.52 36.96 44 44'/%3E%3Cpath stroke-opacity='.5' d='M88-44c-18.48 7.04-25.52 36.96-44 44s-25.52 36.96-44 44 -25.52 36.96-44 44M44-44c-18.48 7.04-25.52 36.96-44 44s-25.52 36.96-44 44M88 0c-18.48 7.04-25.52 36.96-44 44s-25.52 36.96-44 44'/%3E%3C/g%3E%3C/svg%3E");  /* tile 44px 44px */
  --motif-steam: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='56' viewBox='0 0 32 56'%3E%3Cg fill='none' stroke='%23000' stroke-width='1' stroke-linecap='round'%3E%3Cpath d='M8 54c-1.2-2-.6-4 .6-6M24 26c-1.2-2-.6-4 .6-6'/%3E%3Cpath stroke-opacity='.9' d='M8.6 48c1.8-2.33 2.4-4.67.6-7M24.6 20c1.8-2.33 2.4-4.67.6-7'/%3E%3Cpath stroke-opacity='.65' d='M9.2 41c-2.4-2.67-1.8-5.33.6-8M25.2 13c-2.4-2.67-1.8-5.33.6-8'/%3E%3Cpath stroke-opacity='.4' d='M9.8 33c2.8-3 3.4-6 .6-9M25.8 5c2.8-3 3.4-6 .6-9M25.8 61c2.8-3 3.4-6 .6-9'/%3E%3C/g%3E%3C/svg%3E");  /* tile 32px 56px */
  --motif-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128' viewBox='0 0 128 128'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='128' height='128' filter='url(%23g)'/%3E%3C/svg%3E");  /* tile 128px 128px */
}

/* ── Sumi night (dark) ───────────────────────────────────────────
   Same block twice: once for the OS preference (unless forced light), once for the manual override. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #141311;
    --surface: #1D1B18;
    --surface-inset: #262320;
    --surface-pressed: #2E2A25;
    --text: #EDE5D6;
    --text-2: #B3AA9B;
    --text-3: #9A9285;
    --line: #34302A;
    --line-strong: #4A443B;
    --accent: #C8412F;
    --accent-text: #EE7A62;
    --accent-wash: #2B1814;
    --on-accent: #FDFAF4;
    --hero-bg: #1D1B18;
    --hero-text: #EDE5D6;
    --hero-text-2: #B3AA9B;
    --hero-line: #34302A;
    --hero-ridge: #EDE5D6;
    --note-bg: #2A2414;
    --note-text: #F0D48A;
    --r-travel: #625E57;   --r-travel-ink: #BDB5A8;   --r-travel-wash: #221F1B;
    --r-indigo: #3A5590;    --r-indigo-ink: #90A7E0;    --r-indigo-wash: #1A2133;
    --r-moss: #5A7128;   --r-moss-ink: #BFD08E;   --r-moss-wash: #1E2415;
    --r-coast: #1A7788;    --r-coast-ink: #8FD6DE;    --r-coast-wash: #132629;
    --r-ochre: #95590F; --r-ochre-ink: #EBB173; --r-ochre-wash: #2A2114;
    --r-violet: #745AA0;    --r-violet-ink: #C2B0E8;    --r-violet-wash: #211C2C;
    --r-umber: #7A462E;    --r-umber-ink: #CC9F8B;    --r-umber-wash: #2C1E15;
    --r-pine: #287655;     --r-pine-ink: #A0E0BE;     --r-pine-wash: #15261F;
    --r-open: #5A554D;     --r-open-ink: #A39B8E;     --r-open-wash: #1F1D1A;
    --r-plum: #8A3D50; --r-plum-ink: #E3A3B1; --r-plum-wash: #2A171D;
    --leaf-red: #D44866;    --leaf-red-ink: #F7849A;    --leaf-red-wash: #421823;
    --leaf-yellow: #E0B030; --leaf-yellow-ink: #EDCB5A; --leaf-yellow-wash: #3A2D14;
    --season-here: 24%;
    --scrim: rgba(0, 0, 0, .6);
    --shadow-sheet: none;
    --shadow-panel: none;
    --shadow-float: 0 0 0 1px #4A443B;
    --sheet-edge: #4A443B;
    --grain-opacity: 0;
    --motif-opacity: .18;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #141311;
  --surface: #1D1B18;
  --surface-inset: #262320;
  --surface-pressed: #2E2A25;
  --text: #EDE5D6;
  --text-2: #B3AA9B;
  --text-3: #9A9285;
  --line: #34302A;
  --line-strong: #4A443B;
  --accent: #C8412F;
  --accent-text: #EE7A62;
  --accent-wash: #2B1814;
  --on-accent: #FDFAF4;
  --hero-bg: #1D1B18;
  --hero-text: #EDE5D6;
  --hero-text-2: #B3AA9B;
  --hero-line: #34302A;
  --hero-ridge: #EDE5D6;
  --note-bg: #2A2414;
  --note-text: #F0D48A;
  --r-travel: #625E57;   --r-travel-ink: #BDB5A8;   --r-travel-wash: #221F1B;
  --r-indigo: #3A5590;    --r-indigo-ink: #90A7E0;    --r-indigo-wash: #1A2133;
  --r-moss: #5A7128;   --r-moss-ink: #BFD08E;   --r-moss-wash: #1E2415;
  --r-coast: #1A7788;    --r-coast-ink: #8FD6DE;    --r-coast-wash: #132629;
  --r-ochre: #95590F; --r-ochre-ink: #EBB173; --r-ochre-wash: #2A2114;
  --r-violet: #745AA0;    --r-violet-ink: #C2B0E8;    --r-violet-wash: #211C2C;
  --r-umber: #7A462E;    --r-umber-ink: #CC9F8B;    --r-umber-wash: #2C1E15;
  --r-pine: #287655;     --r-pine-ink: #A0E0BE;     --r-pine-wash: #15261F;
  --r-open: #5A554D;     --r-open-ink: #A39B8E;     --r-open-wash: #1F1D1A;
  --r-plum: #8A3D50; --r-plum-ink: #E3A3B1; --r-plum-wash: #2A171D;
  --leaf-red: #D44866;    --leaf-red-ink: #F7849A;    --leaf-red-wash: #421823;
  --leaf-yellow: #E0B030; --leaf-yellow-ink: #EDCB5A; --leaf-yellow-wash: #3A2D14;
  --season-here: 24%;
  --scrim: rgba(0, 0, 0, .6);
  --shadow-sheet: none;
  --shadow-panel: none;
  --shadow-float: 0 0 0 1px #4A443B;
  --sheet-edge: #4A443B;
  --grain-opacity: 0;
  --motif-opacity: .18;
}

/* Sunlight / high-contrast users (light: darker meta text + lines, washes 4% darker, no grain). */
@media (prefers-contrast: more) and (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --text-3: #4F4A42;
    --line: #C9BEA9;
    --grain-opacity: 0;
    --r-travel-wash: #E4DED3; --r-indigo-wash: #D9E0EC; --r-moss-wash: #E0E4CC; --r-coast-wash: #D0E4E7;
    --r-ochre-wash: #EEDCC1; --r-violet-wash: #DFD8EC; --r-open-wash: #E5DED1; --r-plum-wash: #EAD3D8;
    --r-umber-wash: #ECD9CC; --r-pine-wash: #D8E6DD;
    --leaf-red-wash: #EFCDD0; --leaf-yellow-wash: #EDDCA4;
  }
}
@media (prefers-contrast: more) {
  :root[data-theme="light"] {
    --text-3: #4F4A42;
    --line: #C9BEA9;
    --grain-opacity: 0;
    --r-travel-wash: #E4DED3; --r-indigo-wash: #D9E0EC; --r-moss-wash: #E0E4CC; --r-coast-wash: #D0E4E7;
    --r-ochre-wash: #EEDCC1; --r-violet-wash: #DFD8EC; --r-open-wash: #E5DED1; --r-plum-wash: #EAD3D8;
    --r-umber-wash: #ECD9CC; --r-pine-wash: #D8E6DD;
    --leaf-red-wash: #EFCDD0; --leaf-yellow-wash: #EDDCA4;
  }
  :root[data-theme="dark"] { --text-3: #B3AA9B; --line: #4A443B; }
}
@media (prefers-contrast: more) and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --text-3: #B3AA9B; --line: #4A443B; }
}

/* ── Region tone classes: set --tone / --tone-ink / --tone-wash for a subtree ── */
.tone-travel   { --tone: var(--r-travel);   --tone-ink: var(--r-travel-ink);   --tone-wash: var(--r-travel-wash); }
.tone-indigo    { --tone: var(--r-indigo);    --tone-ink: var(--r-indigo-ink);    --tone-wash: var(--r-indigo-wash); }
.tone-moss   { --tone: var(--r-moss);   --tone-ink: var(--r-moss-ink);   --tone-wash: var(--r-moss-wash); }
.tone-coast    { --tone: var(--r-coast);    --tone-ink: var(--r-coast-ink);    --tone-wash: var(--r-coast-wash); }
.tone-ochre { --tone: var(--r-ochre); --tone-ink: var(--r-ochre-ink); --tone-wash: var(--r-ochre-wash); }
.tone-violet    { --tone: var(--r-violet);    --tone-ink: var(--r-violet-ink);    --tone-wash: var(--r-violet-wash); }
.tone-umber     { --tone: var(--r-umber);     --tone-ink: var(--r-umber-ink);     --tone-wash: var(--r-umber-wash); }
.tone-pine      { --tone: var(--r-pine);      --tone-ink: var(--r-pine-ink);      --tone-wash: var(--r-pine-wash); }
.tone-open     { --tone: var(--r-open);     --tone-ink: var(--r-open-ink);     --tone-wash: var(--r-open-wash); }
.tone-plum { --tone: var(--r-plum); --tone-ink: var(--r-plum-ink); --tone-wash: var(--r-plum-wash); }