/**
 * plan8 Admin — Dark Glass バリアント
 * 01_管理画面/tokens.css の上に被せる（or preview_glass.html が直読み）
 * plan8.jp の four forces + ダークガラスモーフィズム
 * as_of: 2026-07-15
 */

:root,
[data-theme="web-glass"] {
  /* 背景は深い紫黒 + ブロブで滲ませる */
  --bg: #0a0614;
  --bg-2: #120a24;
  --fg: #f7f5f2;
  --dim: #d8d4cc;
  --faint: rgba(247, 245, 242, 0.55);
  --faint-2: rgba(255, 255, 255, 0.4);
  --line: rgba(255, 255, 255, 0.12);
  --line-2: rgba(255, 255, 255, 0.22);

  --chaos: #ff4d8d;
  --create: #5ef0c8;
  --cycle: #ffb454;
  --force-link: #9b8cff;
  --grad-force: linear-gradient(
    90deg,
    var(--chaos),
    var(--create),
    var(--cycle),
    var(--force-link)
  );

  /* glass surfaces */
  --glass: rgba(255, 255, 255, 0.04);
  --glass-mid: rgba(255, 255, 255, 0.07);
  --glass-strong: rgba(255, 255, 255, 0.1);
  --glass-edge: rgba(255, 255, 255, 0.16);
  --glass-edge-soft: rgba(255, 255, 255, 0.08);
  --glass-inset: inset 0 1px 0 rgba(255, 255, 255, 0.14);
  --glass-inset-strong: inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -1px 0 rgba(0, 0, 0, 0.25);

  --card: var(--glass-mid);
  --card-solid: #16102c; /* ツールチップ等・不透明面（半透明ガラスは --card） */
  --fill: rgba(255, 255, 255, 0.06);
  --fill-2: rgba(255, 255, 255, 0.1);
  --ink: var(--fg);
  --sub: var(--dim);
  --muted: var(--faint);
  --on-accent: #0a0614;
  --thead: rgba(8, 4, 18, 0.45);

  --accent: var(--fg);
  --accent-soft: rgba(247, 245, 242, 0.1);
  --accent-ink: var(--fg);
  --link: var(--create);

  --soft-green: rgba(94, 240, 200, 0.14);
  --soft-green-ink: #9af8dc;
  --soft-amber: rgba(255, 180, 84, 0.16);
  --soft-amber-ink: #ffd09a;
  --soft-rose: rgba(255, 77, 141, 0.16);
  --soft-rose-ink: #ff9bc4;
  --soft-blue: rgba(155, 140, 255, 0.16);
  --soft-blue-ink: #c8beff;
  --soft-mist: rgba(255, 255, 255, 0.08);
  --soft-mist-ink: var(--dim);
  --soft-violet: rgba(155, 140, 255, 0.14);
  --soft-violet-ink: #c8beff;

  --g: var(--create);
  --g-soft: var(--soft-green);
  --y: var(--cycle);
  --y-soft: var(--soft-amber);
  --r: var(--chaos);
  --r-soft: var(--soft-rose);
  --red: var(--chaos);
  --red-soft: var(--soft-rose);
  --red-ink: var(--soft-rose-ink);
  --blue: var(--force-link);
  --blue-soft: var(--soft-blue);
  --blue-ink: var(--soft-blue-ink);
  --green: var(--create);
  --green-soft: var(--soft-green);
  --green-ink: var(--soft-green-ink);
  --orange: var(--cycle);
  --orange-soft: var(--soft-amber);
  --orange-ink: var(--soft-amber-ink);
  --nature: var(--create);
  --nature-soft: var(--soft-green);
  --nature-ink: var(--soft-green-ink);
  --purple: var(--force-link);
  --purple-soft: var(--soft-blue);
  --teal: var(--create);
  --teal-soft: var(--soft-green);

  --cat-1: var(--create);
  --cat-2: var(--force-link);
  --cat-3: var(--cycle);
  --cat-4: var(--chaos);
  --cat-5: var(--dim);

  --ai-surface: rgba(155, 140, 255, 0.1);
  --ai-surface-2: rgba(155, 140, 255, 0.16);
  --ai-border: rgba(155, 140, 255, 0.32);
  --ai-ink: #d0c8ff;
  --ai-label-bg: rgba(155, 140, 255, 0.2);
  --ai-label-ink: #e0dbff;
  --ai-user-bubble: rgba(255, 255, 255, 0.08);
  --ai-bot-bubble: rgba(155, 140, 255, 0.12);

  --side: transparent;
  --side-edge: transparent;
  --sideink: var(--fg);
  --side-muted: var(--faint);
  --nav-hover: rgba(255, 255, 255, 0.06);
  --nav-on: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.16),
    rgba(255, 255, 255, 0.05)
  );
  --nav-on-border: rgba(255, 255, 255, 0.18);
  --nav-on-shadow: 0 8px 24px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);

  --hover-line: rgba(255, 255, 255, 0.32);
  --hover-line-soft: rgba(255, 255, 255, 0.18);
  --hover-fill: rgba(255, 255, 255, 0.06);
  --hover-ring: 0 0 0 1px rgba(255, 255, 255, 0.22);
  --hover-ring-strong: 0 0 0 1px rgba(94, 240, 200, 0.55),
    0 0 28px rgba(94, 240, 200, 0.12);
  --hover-ease: 0.18s ease;

  --shadow-sm: var(--glass-inset);
  --shadow: 0 12px 40px rgba(0, 0, 0, 0.35), var(--glass-inset);
  --shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.45), var(--glass-inset-strong);
  --shadow-side: 0 20px 60px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -1px 0 rgba(0, 0, 0, 0.2);

  --blur: 24px;
  --blur-strong: 40px;
  --saturate: 1.35;

  --radius: 18px;
  --radius-sm: 14px;
  --radius-xs: 12px;
  --radius-pill: 999px;
  --radius-nav: 12px;
  --side-w: 248px;

  --gap-block: 14px;
  --gap-section: 28px;
  --pad-card: 18px 20px 16px;
  --pad-page-x: 28px;
  --pad-row: 14px 14px;
  --pad-nav: 11px 12px;
  --pad-input: 11px 14px;

  --font: "Gen Interface JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN",
    "Noto Sans JP", Meiryo, system-ui, sans-serif;
  --fs-title1: 34px;
  --fs-title2: 22px;
  --fs-title3: 18px;
  --fs-body: 16px;
  --fs-callout: 15px;
  --fs-subhead: 13px;
  --fs-footnote: 13px;
  --fs-caption: 12px;
  --fs-stat: 36px;
  --fs-label: 13px;
  --fs: var(--fs-body);
  --fs-h1: var(--fs-title1);
  --fs-sec: var(--fs-label);
  --fs-table: var(--fs-callout);
  --fs-th: var(--fs-caption);
  --fs-nav: var(--fs-callout);
  --tracking-label: 0.18em;
  --tracking-tight: -0.02em;
  --tracking-title: -0.03em;
  --lh-body: 1.65;

  --chart-h: 200px;
  --chart-h-sm: 170px;
  --chart-h-lg: 220px;
  --chart-series-1: #d8d4cc;
  --chart-series-2: #9b8cff;
  --chart-series-3: #5ef0c8;
  --chart-grid: rgba(255, 255, 255, 0.08);
  --control-h: 42px;
  --control-h-sm: 36px;
}