/* ============================================================= 診断ツール デザイントークン DESIGN.md v2.0 準拠 / iOS 26 / Apple HIG 2026-03-28 このファイルが唯一のソース。 front.css / admin.css はここを読み込んで参照する。 値をハードコードしない。 ============================================================= */ :root { color-scheme: light dark; /* ============================================================ COLOR — Backgrounds iOS systemGroupedBackground / systemBackground 系 ============================================================ */ --color-bg: light-dark(#F2F2F7, #1C1C1E); --color-surface: light-dark(#FFFFFF, #2C2C2E); --color-surface-elevated: light-dark(#FFFFFF, #3A3A3C); /* ============================================================ COLOR — Text iOS label / secondaryLabel / tertiaryLabel 系 ============================================================ */ --color-text-primary: light-dark(#1C1C1E, #FFFFFF); --color-text-secondary: light-dark(#6E6E73, rgba(235,235,245,0.8)); --color-text-tertiary: light-dark(#AEAEB2, rgba(235,235,245,0.6)); --color-text-quaternary: light-dark(#C7C7CC, rgba(235,235,245,0.3)); /* ============================================================ COLOR — Separator ============================================================ */ --color-separator: light-dark(#E5E5EA, rgba(84,84,88,0.65)); --color-separator-opaque: light-dark(#C6C6C8, #38383A); /* ============================================================ COLOR — Accent（Surface 固有） Surface A（診断フロント）: --accent を #1C1C1E で上書き Surface B（管理画面） : デフォルト値をそのまま使用 ============================================================ */ --color-admin-accent: #007AFF; --color-admin-accent-tint: light-dark(#EBF3FF, #0A2A4A); --color-front-accent: light-dark(#1C1C1E, #FFFFFF); /* ============================================================ COLOR — Semantic ============================================================ */ --color-destructive: #FF3B30; --color-destructive-tint: light-dark(#FFF0F0, rgba(255,59,48,0.15)); --color-destructive-border: light-dark(#FFCDD2, rgba(255,59,48,0.3)); --color-warning: #FF9F0A; --color-warning-tint: light-dark(#FFF3E0, rgba(255,159,10,0.15)); --color-success: #34C759; --color-info: #007AFF; --color-dirty: #FFD60A; /* ============================================================ COLOR — Admin 専用 ============================================================ */ --color-topbar: #1C1C1E; --color-badge-q-bg: light-dark(#E8F2FF, #0A2240); --color-badge-q-text: light-dark(#0066CC, #5BA4F5); /* R = Result（到達点・完了）→ systemGreen。HIG: 完了・成功は緑 */ --color-badge-r-bg: light-dark(#E6F9EE, rgba(52,199,89,0.20)); --color-badge-r-text: light-dark(#1A7A3C, #30D158); /* ============================================================ TYPOGRAPHY ============================================================ */ --font-body: -apple-system, 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', 'YuGothic', sans-serif; --font-mono: 'SF Mono', 'Fira Code', 'Menlo', monospace; /* Dynamic Type スケール（iOS HIG 準拠） */ --text-xs: 0.72rem; /* 11.5px ≈ caption2 最小フォントサイズ */ --text-sm: 0.78rem; /* 12.5px ≈ caption */ --text-base: 0.875rem; /* 14px ≈ footnote */ --text-md: 1rem; /* 16px ≈ body */ --text-lg: 1.15rem; /* 18.4px ≈ callout */ --text-xl: 1.3rem; /* 20.8px ≈ headline */ --text-2xl: 1.5rem; /* 24px ≈ title3 */ --text-3xl: 1.75rem; /* 28px ≈ title2 */ --text-4xl: 2rem; /* 32px ≈ title */ /* Weight */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* Letter spacing */ --tracking-tight: -0.02em; --tracking-normal: 0em; --tracking-label: 0.04em; --tracking-caps: 0.06em; /* Line height */ --leading-tight: 1.35; --leading-body: 1.55; --leading-loose: 1.75; /* ============================================================ SPACING（4px グリッド） HIG: ベゼルあり ≈ 12pt / ベゼルなし ≈ 24pt ============================================================ */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; /* ============================================================ BORDER RADIUS（Squircle / Concentricity 準拠） 外側 > 内側 の階層を必ず守る ============================================================ */ --radius-xs: 4px; /* インラインバッジ */ --radius-sm: 8px; /* 小コントロール・管理ボタン */ --radius-md: 10px; /* インプット・小カード */ --radius-lg: 14px; /* 標準カード内要素・診断選択肢 */ --radius-xl: 16px; /* Liquid Glass SM（メニュー・ドロップダウン） */ --radius-2xl: 20px; /* 標準カード・診断ラッパー */ --radius-3xl: 24px; /* Liquid Glass MD（シート・モーダル） */ --radius-4xl: 32px; /* Liquid Glass LG（大型パネル） */ --radius-pill:9999px; /* pill バッジ */ /* ============================================================ SHADOW ============================================================ */ --shadow-card: 0 1px 3px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.08); --shadow-popup: 0 1px 4px rgba(0,0,0,0.05), 0 8px 20px rgba(0,0,0,0.09); --shadow-menu: 0 2px 8px rgba(0,0,0,0.08), 0 8px 32px rgba(0,0,0,0.14); --shadow-modal: 0 4px 16px rgba(0,0,0,0.12), 0 24px 64px rgba(0,0,0,0.18); --shadow-focus: 0 0 0 3px rgba(0,122,255,0.45); /* ============================================================ MOTION（iOS 26 物理ベース） 登場と退場のカーブは非対称にする ============================================================ */ --ease-spring: cubic-bezier(0.25, 0.46, 0.45, 0.94); /* 汎用 */ --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); /* 登場・overshoot あり */ --ease-exit: cubic-bezier(0.55, 0, 1, 0.45); /* 退場・overshoot なし */ --ease-snap: cubic-bezier(0.2, 0, 0, 1); /* hover 即応 */ --ease-liquid: cubic-bezier(0.25, 1, 0.5, 1); /* Liquid Glass モーフィング */ --duration-instant: 80ms; --duration-fast: 150ms; --duration-normal: 250ms; --duration-slow: 450ms; --duration-crawl: 600ms; /* ============================================================ LIQUID GLASS マテリアル（iOS 26） Layer Economy: 1ビューにつき1枚のみ使用。Glass on Glass 禁止。 ============================================================ */ --lg-blur: blur(24px); --lg-saturate:saturate(180%); /* 彩度ブーストが本質。省くと濁る */ --lg-bg: light-dark(rgba(255,255,255,0.15), rgba(30,30,30,0.35)); --lg-border: light-dark(rgba(255,255,255,0.6), rgba(255,255,255,0.15)); --lg-rim: light-dark( inset 0 1px 1px rgba(255,255,255,0.8), inset 0 1px 1px rgba(255,255,255,0.25) ); --lg-shadow: light-dark( 0 12px 32px rgba(0,0,0,0.08), 0 12px 32px rgba(0,0,0,0.4) ); /* ============================================================ 後方互換エイリアス 既存コード（var(--bg) 等）をそのまま動かすためのマッピング。 新規コードでは --color-* / --radius-* 等の正式トークンを使う。 デフォルト値は Surface B（管理画面）基準。 Surface A（診断フロント）は各 HTML で必要分だけ上書きする。 ============================================================ */ /* Color */ --bg: var(--color-bg); --surface: var(--color-surface); --text-primary: var(--color-text-primary); --text-secondary: var(--color-text-secondary); --text-tertiary: var(--color-text-tertiary); --separator: var(--color-separator); /* Admin デフォルト値 */ --topbar-bg: var(--color-topbar); --accent: var(--color-admin-accent); /* Surface A は #1C1C1E で上書き */ --accent-light:var(--color-admin-accent-tint); /* Radius（Admin デフォルト値） */ --radius: var(--radius-md); /* 10px / Surface A は 14px で上書き */ --radius-admin-lg: var(--radius-xl); /* 16px（admin専用エイリアス。--radius-lg:14pxを上書きしない） */ /* Motion */ --spring: var(--ease-spring); } /* ============================================================ Dark Mode — shadow 調整 light-dark() 未対応の shadow 値はここで上書き ============================================================ */ @media (prefers-color-scheme: dark) { :root { --shadow-card: 0 1px 3px rgba(0,0,0,0.2), 0 8px 24px rgba(0,0,0,0.28); --shadow-popup: 0 1px 4px rgba(0,0,0,0.1), 0 8px 20px rgba(0,0,0,0.2); --shadow-menu: 0 2px 8px rgba(0,0,0,0.18), 0 8px 32px rgba(0,0,0,0.3); --shadow-modal: 0 4px 16px rgba(0,0,0,0.28), 0 24px 64px rgba(0,0,0,0.38); } } /* ============================================================ Liquid Glass — アクセシビリティ必須フォールバック ============================================================ */ /* 1. 透明度を下げる設定（iOS 26 HIG 必須） */ @media (prefers-reduced-transparency: reduce) { .liquid-glass { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--color-surface); border: 1px solid var(--color-separator); box-shadow: var(--shadow-card); } .liquid-glass::after { display: none; } } /* 2. コントラストを上げる設定 */ @media (prefers-contrast: more) { .liquid-glass { border: 2px solid light-dark(#000000, #FFFFFF); } } /* 3. モーション低減 */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* ============================================================ Liquid Glass — 基底クラス 使用箇所: ドロップダウン・メニュー・ポップオーバー（コントロールのみ） ============================================================ */ .liquid-glass { position: relative; background: var(--lg-bg); backdrop-filter: var(--lg-blur) var(--lg-saturate); -webkit-backdrop-filter: var(--lg-blur) var(--lg-saturate); border: 1px solid var(--lg-border); box-shadow: var(--lg-shadow), var(--lg-rim); border-radius: var(--radius-3xl); overflow: hidden; transition: all 0.4s var(--ease-liquid); } /* レンズフレア（グロス疑似要素） */ .liquid-glass::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, transparent 40%); pointer-events: none; } /* ============================================================ Focus — アクセシビリティ必須 すべてのインタラクティブ要素に適用 ============================================================ */ :focus-visible { outline: none; box-shadow: var(--shadow-focus); } :focus:not(:focus-visible) { outline: none; box-shadow: none; }