/* ============================================================================
 * mp-design.css — MENU-PAAN PWA design tokens (iOS parity)
 * ----------------------------------------------------------------------------
 * SSOT: iOS Shared/Theme/MPTheme.swift. Do NOT hardcode colors elsewhere —
 * reference these CSS variables. Mirrors iOS ColorPalette + 3 themes
 * (normal / luxury / dark) switched via :root[data-theme="..."], same design
 * as iOS AppTheme. High-contrast variants map to @media (prefers-contrast: more),
 * mirroring iOS "Increase Contrast" (UIAccessibility.isDarkerSystemColorsEnabled).
 *
 * Stage 0 groundwork (HANDOFF_PWA_REBUILD_v1.md §7). normal is the default and
 * the priority; luxury/dark are wired but to be polished in a later pass.
 * ========================================================================== */

/* ----------------------------------------------------------------------------
 * 画面遷移のちらつき対策(社長指示2026-06-27): MPA の cross-document View Transitions。
 * 同一オリジン間の遷移を白フラッシュ無しのクロスフェードに。 双方のページが opt-in
 * している必要があるため全ページ共通の本CSSで宣言。 未対応ブラウザ(iOS Safari旧版等)は
 * 規則を無視し従来挙動(=現状)に degrade するだけで無害。 prefers-reduced-motion 時は
 * ブラウザが自動でアニメを省略。 html 背景を app-bg に固定し、 CSS適用前の白地も消す。
 * -------------------------------------------------------------------------- */
@view-transition { navigation: auto; }
html { background: var(--mp-bg); }
/* 遷移クロスフェードを少しだけ速く(既定0.25s→0.18s)、 もたつき感を抑える */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .18s; }

/* ----------------------------------------------------------------------------
 * NORMAL theme (default) — MPTheme.swift AppTheme.normal.palette (L390-411)
 * -------------------------------------------------------------------------- */
:root,
:root[data-theme="normal"] {
  /* Brand */
  --mp-primary:        #9B1C31;  /* Bordeaux (主役) */
  --mp-cta-fill:       var(--mp-primary);  /* 白文字が乗るソリッド塗り(CTA/バッジ/バナー)。normal=primary(不変) iOS c8f9ff2 */
  --mp-primary-deep:   #7A1527;
  --mp-primary-soft:   #FDF5F6;
  --mp-primary-tint:   #FCEEF0;
  /* Gold accent */
  --mp-gold:           #C9A961;
  /* Backgrounds */
  --mp-bg:             #FDFBF9;
  --mp-bg-soft:        #F7F1ED;
  --mp-surface:        #FFFFFF;
  /* Borders */
  --mp-border:         #E8DDD6;
  --mp-border-subtle:  #F0E4D9;
  /* Text hierarchy */
  --mp-text:           #1A1410;
  --mp-text-mute:      #5A4E44;
  --mp-text-soft:      #847362;  /* 2026-06-28 iOS AA(4259194): 旧#8B7968=4.17→4.56 */
  --mp-text-faint:     #7D746D;  /* 2026-06-28 iOS AA: 旧#C4B5AB=1.99(判読不可)→4.57 色相維持 */
  /* Danger / warning */
  --mp-danger:         #C8102E;
  --mp-warning:        #8B6F1A;
  --mp-caution:        #C2557A;  /* 2026-07-08 社長指示「注意はピンク」 */
  /* Tags */
  --mp-local-tag:      #B7762F;
  --mp-personal-tag:   #00766C;
  --mp-paan-navy:      #1A2E5C;
  --mp-free-accent:    #2A8F5C;  /* 無料機能の緑 */
}

/* ----------------------------------------------------------------------------
 * LUXURY theme — Royal Navy 基調 (paan.co.jp 法人色) + Gold
 * MPTheme.swift AppTheme.luxury.palette (L416-437)
 * -------------------------------------------------------------------------- */
:root[data-theme="luxury"] {
  --mp-primary:        #1A2E5C;
  --mp-primary-deep:   #0F1F40;
  --mp-primary-soft:   #F5F7FB;
  --mp-primary-tint:   #E8ECF5;
  --mp-gold:           #B8860B;
  --mp-bg:             #FAFAFA;
  --mp-bg-soft:        #F0F0F0;
  --mp-surface:        #FFFFFF;
  --mp-border:         #D4D4D4;
  --mp-border-subtle:  #E5E5E5;
  --mp-text:           #1A1A1A;
  --mp-text-mute:      #4A4A4A;
  --mp-text-soft:      #707070;
  --mp-text-faint:     #757575;  /* 2026-06-28 iOS AA: 旧#B0B0B0=2.17→4.61 */
  --mp-danger:         #C8102E;
  --mp-warning:        #8B6F1A;
  --mp-caution:        #C2557A;  /* 2026-07-08 社長指示「注意はピンク」 */
  --mp-local-tag:      #9C6B30;
  --mp-personal-tag:   #006B62;
  --mp-paan-navy:      #1A2E5C;
  --mp-free-accent:    #0E7C5A;
}

/* ----------------------------------------------------------------------------
 * DARK theme — 深紅の夜 (暗赤紫背景 + 明るめ Bordeaux + 高コントラスト白文字)
 * MPTheme.swift AppTheme.dark.palette (L443-464)
 * -------------------------------------------------------------------------- */
:root[data-theme="dark"] {
  --mp-primary:        #D14860;
  --mp-primary-deep:   #9B1C31;
  --mp-cta-fill:       var(--mp-primary-deep);  /* dark=velvet深紅(明るいprimaryは文字/アイコン用、塗りに使うと光る) iOS parity */
  --mp-primary-soft:   #2A1014;
  --mp-primary-tint:   #4A1A20;
  --mp-gold:           #E5C170;
  --mp-bg:             #1A0A0E;
  --mp-bg-soft:        #261015;
  --mp-surface:        #2D141B;
  --mp-border:         #3D1F26;
  --mp-border-subtle:  #2D1820;
  --mp-text:           #FAFAFA;
  --mp-text-mute:      #E0D0D4;
  --mp-text-soft:      #B89BA1;
  --mp-text-faint:     #997D83;  /* 2026-06-28 iOS AA: 旧#8A7176=3.83→4.57 明るく */
  --mp-danger:         #FF4D6D;
  --mp-warning:        #E5C170;
  --mp-caution:        #E58AAB;  /* 注意ピンク */
  --mp-local-tag:      #E0A85A;
  --mp-personal-tag:   #4ABFB0;
  --mp-paan-navy:      #1A2E5C;
  --mp-free-accent:    #3AAD72;
}

/* ----------------------------------------------------------------------------
 * Theme-independent fixed tokens
 * -------------------------------------------------------------------------- */
:root {
  /* 感動した料理 (お気に入り) — Burnt Orange / Terracotta, fixed across all themes.
     MPTheme.swift Color.memorable = Color(red:0.78, green:0.42, blue:0.21). */
  --mp-memorable:      #C76B36;        /* rgb(199,107,54) */
  --mp-memorable-soft: rgba(199,107,54,0.08);

  /* Spacing (MPTheme.Spacing) */
  --mp-space-xs:   4px;
  --mp-space-sm:   8px;
  --mp-space-base: 16px;
  --mp-space-lg:   24px;
  --mp-space-xl:   32px;
  --mp-space-xxl:  48px;

  /* Radius (MPTheme.Radius) */
  --mp-radius-sm:   6px;
  --mp-radius-base: 12px;
  --mp-radius-lg:   16px;
  --mp-radius-pill: 999px;

  /* Typography families (MPTheme.Font).
     Loaded via <link> to Google Fonts in each page <head>. */
  /* iOS は Marcellus 以外を同梱せず .system(design:) にフォールバックする。
     = 見出しは Hiragino Mincho(明朝), 本文は SF Pro/Hiragino 角ゴ。
     Apple 端末では下記スタックが iOS と完全一致。Android は Noto を末尾で使う。 */
  /* 2026-06-26 社長指示「RESTO-PAAN のフォントに準拠」: RESTO アプリは見出し・数値ともゴシック(角ゴ)。
     見出しの明朝をやめ、 本文と同じ角ゴシック系に統一。 eyebrow の Marcellus(Latin 装飾)のみ維持。 */
  --mp-font-display: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", "Segoe UI", sans-serif; /* 見出し(角ゴ, RESTO準拠) */
  --mp-font-body:    -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", "Segoe UI", sans-serif; /* 本文 */
  --mp-font-num:     -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", "Noto Sans JP", "Segoe UI", sans-serif;                              /* 数値(角ゴ, RESTO準拠) */
  --mp-font-eyebrow: "Marcellus", "Hiragino Sans", "Noto Sans JP", sans-serif;                            /* 小見出し: Latin 装飾フォント */

  /* User font scale (MPTheme FontScale): small=1.0 / medium=1.18 /
     large=1.35 / extraLarge=1.7. Switch by setting --mp-scale on :root.
     高齢者・観光客の可読性最優先 (ろくちゃん最重視). */
  /* 2026-07-03 社長指示(同日再指示で上書き): 既定は「中」=1.18。 各ページの mp-boot-theme が
     ブラウザ既定フォントサイズ(font-size:initial の実測px)から 小/中/大/特大 を自動判定して
     data-scale を必ず立てるため、 この値は JS 失敗時の最終フォールバックのみ。 */
  --mp-scale: 1.18;

  /* Semantic type scale — base px × --mp-scale. iOS MPTheme.Font.body(N) の
     N と同一の基準 px を使う (scaled() と同じ計算 = 完全パリティ)。 */
  /* 2026-06-26「2pt落とす」は body/title 帯には正だったが caption 帯 (iOS 11-12pt
     が最多使用帯) まで 10px に潰していた → 2026-07-03 iOS 帯に復元:
     micro=10 (iOS 最小テキスト body(10)。 これ未満のテキスト禁止) /
     caption=11 / note=12 / body=13 / body-lg=15。 */
  --mp-fs-micro:      calc(10px * var(--mp-scale));
  --mp-fs-eyebrow:    calc(11px * var(--mp-scale));
  --mp-fs-caption:    calc(11px * var(--mp-scale));
  --mp-fs-note:       calc(12px * var(--mp-scale));
  --mp-fs-body:       calc(13px * var(--mp-scale));
  --mp-fs-body-lg:    calc(15px * var(--mp-scale));
  --mp-fs-title:      calc(18px * var(--mp-scale));
  --mp-fs-title-lg:   calc(22px * var(--mp-scale));
  --mp-fs-display:    calc(26px * var(--mp-scale));
  --mp-fs-display-lg: calc(32px * var(--mp-scale));

  /* Animation (MPTheme.Anim) */
  --mp-anim-fast:   0.15s ease-in-out;
  --mp-anim-smooth: 0.3s ease-in-out;
  --mp-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);  /* ≈ interactiveSpring */

  color-scheme: light;
}

:root[data-theme="dark"] { color-scheme: dark; }

/* 2026-07-14 社長指示: 中国語/韓国語/タイ語UIで日本語フォントの字形が混じる(Han統合=共有漢字が日本語形)問題を防ぐ。
   i18n が documentElement[lang] を現UIロケール(zh-CN/zh-TW/ko/th 等)に設定済ゆえ lang別に地域フォントを最優先。
   -apple-system を先頭に残し数字/欧字はSF、 漢字/ハングル/タイ字はその言語の字形フォントが担う。 num(数字)は言語不問で据置。 */
:root[lang="zh-CN"] {
  --mp-font-display: -apple-system, BlinkMacSystemFont, "PingFang SC", "Noto Sans SC", "Microsoft YaHei", "Segoe UI", sans-serif;
  --mp-font-body:    -apple-system, BlinkMacSystemFont, "PingFang SC", "Noto Sans SC", "Microsoft YaHei", "Segoe UI", sans-serif;
  --mp-font-eyebrow: "Marcellus", "PingFang SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;
}
:root[lang="zh-TW"] {
  --mp-font-display: -apple-system, BlinkMacSystemFont, "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", "Segoe UI", sans-serif;
  --mp-font-body:    -apple-system, BlinkMacSystemFont, "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", "Segoe UI", sans-serif;
  --mp-font-eyebrow: "Marcellus", "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
}
:root[lang="ko"] {
  --mp-font-display: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Segoe UI", sans-serif;
  --mp-font-body:    -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Segoe UI", sans-serif;
  --mp-font-eyebrow: "Marcellus", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
}
:root[lang="th"] {
  --mp-font-display: -apple-system, BlinkMacSystemFont, "Thonburi", "Noto Sans Thai", "Leelawadee UI", "Segoe UI", sans-serif;
  --mp-font-body:    -apple-system, BlinkMacSystemFont, "Thonburi", "Noto Sans Thai", "Leelawadee UI", "Segoe UI", sans-serif;
  --mp-font-eyebrow: "Marcellus", "Thonburi", "Noto Sans Thai", "Leelawadee UI", sans-serif;
}

/* User scale presets — apply on <html> via JS / settings. */
:root[data-scale="small"]      { --mp-scale: 1.0; }
:root[data-scale="medium"]     { --mp-scale: 1.18; }
:root[data-scale="large"]      { --mp-scale: 1.35; }
:root[data-scale="extraLarge"] { --mp-scale: 1.7; }

/* ----------------------------------------------------------------------------
 * High contrast — mirrors iOS paletteWithContrast(highContrast:true).
 * Triggered by OS "Increase Contrast" → CSS prefers-contrast: more.
 * normal variant from MPTheme.swift L313-333 (luxury/dark HC: later pass).
 * -------------------------------------------------------------------------- */
@media (prefers-contrast: more) {
  :root,
  :root[data-theme="normal"] {
    --mp-border:        #8B7968;
    --mp-border-subtle: #C4B5AB;
    --mp-text:          #000000;
    --mp-text-mute:     #1A1410;
    --mp-text-soft:     #3A2E24;
    --mp-text-faint:    #5A4E44;
    --mp-danger:        #A00020;
    --mp-warning:       #6B5510;
    --mp-caution:        #A03A60;  /* 注意ピンク */
    --mp-local-tag:     #9B5E20;
    --mp-personal-tag:  #004D44;
    --mp-free-accent:   #1F6B43;
  }
}

/* ----------------------------------------------------------------------------
 * Minimal base reset — Starbucks-style: white-dominant, generous space, no shadow.
 * -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

/* the `hidden` attribute must win over component display rules (flex/grid/block).
   Without this, e.g. .auth-card{display:flex} overrides [hidden] and leaks
   panels meant to be hidden (login reset panel, signup confirm card, etc.). */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--mp-bg);
  color: var(--mp-text);
  font-family: var(--mp-font-body);
  font-size: var(--mp-fs-body);
  line-height: 1.4;  /* iOS Text 行送り寄せ(2026-07-03 社長指示「間延び」対策。SwiftUI既定≈1.2-1.3、CJK可読の折衷) */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3 { font-family: var(--mp-font-display); font-weight: 600; margin: 0; }

button { font-family: inherit; }

a { color: var(--mp-primary); }

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