/* ════════════════════════════════════════════════════════════════
   RE-INNOVATIONS — Unified Design System
   tokens.css  ·  v12.0  ·  Single source of truth
   ----------------------------------------------------------------
   全ページで最初に読み込まれる共通トークン。
   style.css / dashboard.css / admin.css は、各自のローカル別名
   (--bg, --accent, --ac …) をここで定義したトークンへ接続する。
   → LP・顧客ダッシュボード・管理画面のブランド体験を一本化する。
   ════════════════════════════════════════════════════════════════ */
:root{
  /* ── Brand foundation: deep navy (warm dark, LP↔app 共通) ── */
  --navy-0:#060E1C;   /* 最深部 — フッター/サイドバー/告知バー */
  --navy-1:#0A1628;   /* base canvas（本文背景） */
  --navy-2:#0F1E3D;
  --navy-3:#142C54;   /* card */
  --navy-4:#1B3868;   /* raised / hover */
  --navy-5:#244680;
  --navy-6:#2F5AA0;

  /* App 向けに微調整したサーフェス段階（データ密度の高い画面用） */
  --surface-0:#0A1628;  /* app body */
  --surface-1:#0E1B33;  /* app raised bg / sidebar */
  --surface-2:#13294C;  /* card */
  --surface-3:#1A3461;  /* hover / strong */

  /* ── Paper / light ── */
  --paper:#FFFFFF;
  --paper-2:#F1F5F9;

  /* ── Brand accent: Emerald（プロダクト全体で唯一のアクセント） ── */
  --brand:#10B981;
  --brand-light:#34D399;
  --brand-dark:#059669;
  --brand-bg:rgba(16,185,129,.08);
  --brand-border:rgba(16,185,129,.28);
  --brand-glow:rgba(16,185,129,.35);

  /* ── Secondary: Amber ── */
  --amber:#F5B947;
  --amber-light:#FBCB6E;
  --amber-text:#F5B947;   /* 琥珀の「文字」用（ライトでは白地向けに濃色へ上書き） */
  --amber-bg:rgba(245,185,71,.10);
  --amber-border:rgba(245,185,71,.32);

  /* ── Status（アプリのバッジ等で共通利用） ── */
  --info:#4D9FFF;
  --info-bg:rgba(77,159,255,.12);
  --violet:#9B7DFF;
  --violet-bg:rgba(155,125,255,.12);
  --cyan:#22C7C0;
  --success:#10B981;
  --warning:#F5B947;
  --danger:#F4566B;
  --danger-bg:rgba(244,86,107,.14);

  /* ── Ticket status（顧客ダッシュボード/管理画面で同じ意味色を共有） ── */
  --st-new:var(--info);
  --st-progress:var(--brand);
  --st-wait-customer:var(--amber);
  --st-wait-visit:var(--cyan);
  --st-wait-maker:var(--violet);
  --st-pending-close:var(--violet);
  --st-escalated:var(--danger);
  --st-hold:#64748B;
  --st-stock:#0D9488;

  /* ── Text on dark ── */
  --tx-1:#F1F5F9;
  --tx-2:#C3CFE0;
  --tx-3:#8FA0BB;
  --tx-4:#6B7D99;

  /* ── Lines / borders ── */
  --line-1:rgba(255,255,255,.08);
  --line-2:rgba(255,255,255,.14);
  --line-3:rgba(255,255,255,.22);

  /* ── Typography ── */
  --ff-sans:"Noto Sans JP","Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --ff-display:"Plus Jakarta Sans","Noto Sans JP",sans-serif;
  --ff-mono:ui-monospace,"SF Mono","Cascadia Code","Roboto Mono",monospace;

  /* ── Radius ── */
  --r-xs:6px;
  --r-sm:8px;
  --r:12px;
  --r-lg:16px;
  --r-xl:20px;
  --r-pill:999px;

  /* ── Elevation（navy に最適化した影） ── */
  --sh-1:0 1px 2px rgba(3,8,18,.40);
  --sh-2:0 4px 16px rgba(3,8,18,.42);
  --sh-3:0 14px 36px rgba(3,8,18,.48);
  --sh-4:0 28px 64px rgba(3,8,18,.55);

  /* ── Focus ring（アクセシビリティ・ブランド色） ── */
  --focus-ring:0 0 0 3px rgba(16,185,129,.40);

  /* ── Semantic surfaces（直書きを退治するための意味トークン。
        ライト/ダーク両テーマで値を持つ。下の [data-theme="light"] で上書き） ── */
  --ink:#0A1628;                       /* 固定の濃色インク：明色要素上の文字/濃色アクセント（両テーマ共通） */
  --ink-hover:#16294A;                 /* 固定の濃色：--ink 要素のホバー（両テーマ共通） */
  --paper-ink:#FFFFFF;                 /* 固定の白：濃色要素上の文字（両テーマ共通） */
  --announce-bg:#050E1F;               /* 告知バー */
  --nav-bg:rgba(10,22,40,.88);         /* ナビ（blur） */
  --nav-bg-scrolled:rgba(7,8,13,.92);  /* スクロール時ナビ */
  --footer-bg:#050E1F;                 /* フッター */
  --overlay:rgba(5,14,31,.78);         /* モーダル背景の暗幕 */
  --hover-soft:rgba(255,255,255,.03);  /* 微弱ホバー/ゼブラ */
  --hover-soft-2:rgba(255,255,255,.06);
  --logo-invert:brightness(0) invert(1); /* ロゴ白抜き（ライトでは none） */

  /* ── Motion ── */
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-out:cubic-bezier(.22,.61,.36,1);
  --dur-1:.15s;
  --dur-2:.25s;
  --dur-3:.40s;

  /* ── Spacing rhythm ── */
  --space-1:4px;  --space-2:8px;  --space-3:12px; --space-4:16px;
  --space-5:24px; --space-6:32px; --space-7:48px; --space-8:64px;

  /* ── Layout ── */
  --sidebar:240px;
  --container:1160px;
}

/* ════════════════════════════════════════════════════════════════
   LIGHT THEME — [data-theme="light"] で色トークンを上書き
   ----------------------------------------------------------------
   サーフェス（navy/surface）を白〜淡グレーへ、テキスト（tx）を濃色へ、
   境界（line）/影（sh）を白地向けへ反転。brand/status の色相は維持し、
   低α背景のみ白地で視認できるよう微調整する。
   ※ --ink / --paper-ink は固定値のため上書きしない（明色/濃色要素上の文字用）。
   ════════════════════════════════════════════════════════════════ */
:root[data-theme="light"]{
  /* サーフェス段階：濃ネイビー → 淡グレー地＋白カード
     （本文地をわずかにグレーにし、白いカード/チップ/ボタンを浮かせる） */
  --navy-0:#EDF2F9;   /* 深部（独自の意味トークンで上書きされる領域が多い） */
  --navy-1:#F4F7FB;   /* base canvas（本文背景・淡グレー） */
  --navy-2:#FFFFFF;   /* alt セクション / モーダル / ドロップダウン */
  --navy-3:#FFFFFF;   /* card（白） */
  --navy-4:#EAF0F7;   /* raised / hover */
  --navy-5:#DCE5F0;
  --navy-6:#C7D3E2;

  --surface-0:#F4F7FB;  /* app body（淡グレー） */
  --surface-1:#FFFFFF;  /* sidebar / raised（白） */
  --surface-2:#FFFFFF;  /* card（白） */
  --surface-3:#EAF0F7;  /* hover / strong */

  /* テキスト：明色 → 濃色インク */
  --tx-1:#0F1E3D;
  --tx-2:#3A4A63;
  --tx-3:#5C6E88;
  --tx-4:#647189;   /* 最も淡いテキスト。白地で読めるよう #8493A8 から濃く（フッター著作権等） */

  /* 境界：白の半透明 → 黒（ネイビー）の半透明 */
  --line-1:rgba(15,30,61,.10);
  --line-2:rgba(15,30,61,.16);
  --line-3:rgba(15,30,61,.24);

  /* 影：ネイビー影 → 淡いグレー影 */
  --sh-1:0 1px 2px rgba(15,23,42,.06);
  --sh-2:0 4px 16px rgba(15,23,42,.08);
  --sh-3:0 14px 36px rgba(15,23,42,.12);
  --sh-4:0 28px 64px rgba(15,23,42,.16);

  /* アクセント：白地では bright emerald が薄くて読めないため、文字・塗りとも濃いシェードへ。
     ダーク用の bright 値は :root 既定のまま（ここはライトのみ上書き）。 */
  --brand:#059669;
  --brand-light:#047857;   /* 強調アクセント文字（白地で読める濃emerald） */
  --brand-dark:#065f46;
  --success:#059669;
  --amber-text:#B45309;    /* 琥珀の文字（白地で読める濃amber） */
  --brand-bg:rgba(16,185,129,.10);
  --brand-border:rgba(16,185,129,.30);
  --brand-glow:rgba(16,185,129,.20);
  --amber-bg:rgba(245,185,71,.16);
  --amber-border:rgba(245,185,71,.42);
  --info-bg:rgba(77,159,255,.14);
  --violet-bg:rgba(155,125,255,.16);
  --danger-bg:rgba(244,86,107,.12);

  --focus-ring:0 0 0 3px rgba(16,185,129,.35);

  /* 意味トークン（ライト） */
  --announce-bg:#EEF3F9;
  --nav-bg:rgba(255,255,255,.82);
  --nav-bg-scrolled:rgba(255,255,255,.94);
  --footer-bg:#EEF3F9;
  --overlay:rgba(15,23,42,.45);
  --hover-soft:rgba(15,30,61,.04);
  --hover-soft-2:rgba(15,30,61,.07);
  --logo-invert:brightness(0);  /* 白系ロゴアセットを黒シルエット化（白地で視認） */
}

/* ════════════════════════════════════════════════════════════════
   THEME TOGGLE — 共有トグルボタン（theme.js が全ページへ注入）
   ════════════════════════════════════════════════════════════════ */
.theme-toggle{
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;flex-shrink:0;
  background:transparent;border:1px solid var(--line-2);border-radius:var(--r-pill);
  color:var(--tx-2);cursor:pointer;
  transition:background var(--dur-1) var(--ease),color var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease);
}
.theme-toggle:hover{background:var(--hover-soft);color:var(--tx-1);border-color:var(--line-3)}
.theme-toggle:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.theme-toggle svg{width:18px;height:18px;display:block}
/* 太陽/月の出し分け：dark=月を表示、light=太陽を表示 */
.theme-toggle .ico-sun{display:none}
.theme-toggle .ico-moon{display:block}
:root[data-theme="light"] .theme-toggle .ico-sun{display:block}
:root[data-theme="light"] .theme-toggle .ico-moon{display:none}
/* サイドバー等で横幅いっぱいのラベル付き表示にする変種 */
.theme-toggle--block{
  width:100%;height:auto;gap:8px;padding:8px 12px;border-radius:var(--r-sm);
  justify-content:flex-start;font-size:.78rem;font-weight:500;font-family:var(--ff-sans);
}
.theme-toggle--block .tt-label{white-space:nowrap}
.theme-toggle--block .tt-label .tt-on{display:none}
:root[data-theme="light"] .theme-toggle--block .tt-label .tt-on{display:inline}
:root[data-theme="light"] .theme-toggle--block .tt-label .tt-off{display:none}

/* prefers-reduced-motion: モーションを抑制 */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}