/*
 * Drift デザイントークン — Apple/visionOS風（design_handoff_drift_apple_ui 準拠）
 * 全面ビューポートの上にガラス質のフローティングUIが浮かぶ。
 * すべてのUIはこのトークン系のみを使う。生の色・秒数・pxの直書きを禁止する。
 * ダークが正。ライトは [data-theme="light"] で切替（フェーズ2で公開）。
 */
:root {
  --collection-controls-space: 128px;
  --collection-control-size: 48px;
  /* ---- アクセント ---- */
  --accent: #0a84ff;
  --accent-strong: #2e95ff;
  --accent-dim: rgba(10, 132, 255, 0.17);
  --accent-text: #8ec4ff;
  --text-on-accent: #ffffff;

  /* ---- 状態色 ---- */
  --danger: #ff6961;
  --warning: #e0a44a;
  /* 明るい空間の上でも説明が読めるように、文字の背後だけを沈める幕 */
  --note-scrim: rgba(0, 0, 0, 0.62);
  --danger-dim: rgba(255, 105, 97, 0.14);
  --success: #30d158;

  /* ---- 文字 ---- */
  --text-primary: #f2f4f8;
  --text-secondary: rgba(235, 240, 255, 0.55);
  --text-tertiary: rgba(235, 240, 255, 0.4);

  /* ---- 背景 ---- */
  --bg-app: #05070d;
  --bg-viewport: #05070d;
  /* 3D空間の背景（シーン設定 spaceBackground で切替。既定はダークブルー） */
  --bg-space: radial-gradient(
    ellipse 120% 90% at 50% 42%,
    #1a2748 0%,
    #101a33 40%,
    #090e1d 70%,
    #05070d 100%
  );

  /* ---- 空間の上に直接載る要素（スケールバー・再生ドット・場面ラベル） ---- */
  --on-space-line: rgba(235, 240, 255, 0.5);
  --on-space-text: rgba(235, 240, 255, 0.5);
  --on-space-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
  --space-dot: rgba(255, 255, 255, 0.25);
  --space-dot-hover: rgba(255, 255, 255, 0.45);
  --space-dot-active: #f2f4f8;

  /* ---- ガラス様式 ---- */
  --glass-bg: rgba(22, 25, 32, 0.68);
  /* 背後の要素と重なるパネル用（透けさせない） */
  --glass-bg-solid: #1b1f27;
  --glass-border: rgba(255, 255, 255, 0.09);
  --glass-blur: blur(30px) saturate(1.6);
  --glass-shadow: 0 10px 40px rgba(0, 0, 0, 0.45), inset 0 0.5px 0 rgba(255, 255, 255, 0.14);

  /* ---- 面（インセットグループ・ホバー） ---- */
  --surface-1: rgba(255, 255, 255, 0.055);
  --bg-panel: var(--glass-bg);
  --bg-raised: var(--surface-1);
  --bg-hover: rgba(255, 255, 255, 0.09);
  --bg-active: rgba(255, 255, 255, 0.14);
  --border-hairline: rgba(255, 255, 255, 0.09);
  --border-strong: rgba(255, 255, 255, 0.16);

  /* ---- タイポグラフィ ---- */
  --font-ui:
    -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Hiragino Sans', 'Noto Sans JP', sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, monospace;
  --text-xxs: 10px; /* チップ */
  --text-xs: 11px; /* 注記 */
  --text-sm: 12px; /* 補助 */
  --text-s: 13px; /* 本文・コントロール */
  --text-m: 15px; /* 見出し */
  --text-ml: 16px; /* パネル見出し */
  --text-l: 32px; /* 画面タイトル */
  --leading: 1.55;
  --tracking-tight: -0.015em;
  --tracking-wide: 0.08em;

  /* ---- 余白（4pxグリッド） ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  /* ---- 角丸 ---- */
  --radius-chip: 6px;
  --radius-s: 8px;
  --radius-thumb: 10px;
  --radius-m: 12px;
  --radius-seg: 17px;
  --radius-l: 20px;
  --radius-island: 22px;
  --radius-full: 999px;

  /* ---- 影（非ガラス要素用） ---- */
  --shadow-raised: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 16px rgba(0, 0, 0, 0.35);
  --shadow-overlay: 0 12px 48px rgba(0, 0, 0, 0.5);
  --shadow-accent: 0 4px 20px rgba(10, 132, 255, 0.4);

  /* ---- モーション ---- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-instant: 120ms;
  --dur-fast: 160ms;
  --dur-base: 240ms;
  --dur-mid: 200ms;
  --dur-slow: 320ms;
  --dur-flash: 420ms; /* 場面追加の白フラッシュ */
  --dur-slower: 480ms;
  --dur-cinematic: 560ms;

  /* ---- フォーカスリング ---- */
  --focus-ring: 0 0 0 2px var(--bg-app), 0 0 0 4px var(--accent);
}

/* /home: 作品の色を引き立てる、静かな紹介ページ。既存の鑑賞・編集には適用しない。 */
[data-marketing] {
  --home-bg: #0b100f;
  --home-panel: #14201b;
  --home-text: #f2f4f8;
  --home-muted: #b6c2ba;
  --home-accent: #d5e1ce;
  --home-line: rgba(213, 225, 206, 0.2);
  --home-scrim:
    linear-gradient(
      90deg,
      #0b100f 6%,
      rgba(11, 16, 15, 0.95) 24%,
      rgba(11, 16, 15, 0.4) 55%,
      rgba(11, 16, 15, 0.05) 100%
    ),
    linear-gradient(0deg, #0b100f 0%, transparent 40%);
  --home-mobile-scrim: linear-gradient(
    0deg,
    #0b100f 4%,
    rgba(11, 16, 15, 0.88) 40%,
    rgba(11, 16, 15, 0.15) 100%
  );
  --home-overlay: rgba(11, 16, 15, 0.7);
  --home-focus: 0 0 0 3px var(--home-bg), 0 0 0 5px var(--home-accent);
  --home-font-display: 'Hiragino Mincho ProN', 'Yu Mincho', 'YuMincho', 'Noto Serif JP', serif;
  --home-wordmark: Georgia, 'Times New Roman', serif;
  --home-display: clamp(40px, 4.6vw, 68px);
  --home-mobile-display: clamp(34px, 10.2vw, 44px);
  --home-heading: clamp(26px, 3vw, 40px);
  --home-subheading: 20px;
  --home-body: 15px;
  --home-small: 13px;
  --home-brand: 30px;
  --home-small-brand: 24px;
  --home-number: 36px;
  --home-leading: 1.9;
  --home-heading-leading: 1.55;
  --home-tracking: 0.035em;
  --home-max: 1200px;
  --home-gutter: clamp(24px, 5vw, 72px);
  --home-section: clamp(64px, 8vw, 112px);
  --home-hero-height: 650px;
  --home-mobile-hero-height: 690px;
  --home-mobile-image-height: 480px;
  --home-header-height: 88px;
  --home-copy-width: 620px;
  --home-paragraph-width: 560px;
  --home-contact-width: 400px;
  --home-camera-width: 360px;
  --home-control-height: 48px;
  --home-icon-size: 20px;
  --home-play-size: 48px;
  --home-border-width: 1px;
  --home-step-gap: 64px;
  --home-scroll-offset: 32px;
  --home-hero-mobile-top: 220px;
  --home-hero-mobile-bottom: 110px;
  --home-footer-gap: 40px;
}

/* 3D空間背景: ライトグレー（spaceBackground='lightgray'。新規シーンの既定） */
[data-space='light'] {
  --bg-space: radial-gradient(ellipse 120% 90% at 50% 42%, #f5f6f9 0%, #e7eaf1 45%, #d2d8e3 100%);
  --on-space-line: rgba(50, 56, 72, 0.55);
  --on-space-text: rgba(50, 56, 72, 0.6);
  --on-space-shadow: 0 1px 8px rgba(255, 255, 255, 0.6);
  --space-dot: rgba(0, 0, 0, 0.28);
  --space-dot-hover: rgba(0, 0, 0, 0.45);
  --space-dot-active: #1d1d1f;
}

/* 3D空間背景: 中間グレー（spaceBackground='gray'）。
 * 写真の18%グレーに寄せた無彩色。すそはビネットで静かに沈む */
[data-space='gray'] {
  --bg-space: radial-gradient(
    ellipse 110% 85% at 50% 42%,
    #75777c 0%,
    #5c5e64 35%,
    #3a3c41 65%,
    #1a1b1f 88%,
    #0e0f12 100%
  );
}

/* 3D空間背景: 後光（シーンごとの設定 spaceBackground='halo'）。
 * ものの3DGS向け。グラデーションの中心はビューアが --halo-x/--halo-y で
 * オブジェクトのスクリーン位置に追従させる */
[data-space='halo'] {
  --bg-space: radial-gradient(
    circle at var(--halo-x, 50%) var(--halo-y, 45%),
    #4a4e59 0%,
    #2b2e37 30%,
    #15171d 60%,
    #05070d 100%
  );
}

/* ライトテーマ（フェーズ2でトグル公開。3D空間背景はダークのまま） */
:root[data-theme='light'] {
  --accent: #007aff;
  --accent-strong: #1e8eff;
  --accent-dim: rgba(0, 122, 255, 0.17);
  --accent-text: #0066cc;
  --danger: #e5342b;
  --warning: #b4761c;
  --note-scrim: rgba(255, 255, 255, 0.72);
  --danger-dim: rgba(229, 52, 43, 0.12);
  --success: #248a3d;
  --text-primary: #1d1d1f;
  --text-secondary: rgba(60, 60, 67, 0.55);
  --text-tertiary: rgba(60, 60, 67, 0.4);
  --bg-app: #eef0f4;
  --glass-bg: rgba(255, 255, 255, 0.7);
  --glass-bg-solid: #ffffff;
  --glass-border: rgba(0, 0, 0, 0.08);
  --glass-shadow: 0 10px 40px rgba(30, 40, 70, 0.14), inset 0 0.5px 0 rgba(255, 255, 255, 0.7);
  --surface-1: rgba(0, 0, 0, 0.045);
  --bg-hover: rgba(0, 0, 0, 0.06);
  --bg-active: rgba(0, 0, 0, 0.1);
  --border-hairline: rgba(0, 0, 0, 0.08);
  --border-strong: rgba(0, 0, 0, 0.14);
  --shadow-overlay: 0 12px 48px rgba(30, 40, 70, 0.16);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-instant: 0ms;
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-mid: 0ms;
    --dur-slow: 0ms;
    --dur-flash: 0ms;
    --dur-slower: 0ms;
    --dur-cinematic: 0ms;
  }
}

/* 子どもと楽しむ恐竜図鑑。通常の鑑賞・編集画面には適用しない。 */
:root {
  --atlas-bg: #eff5eb;
  --atlas-card: #ffffff;
  --atlas-ink: #294637;
  --atlas-subtle: #607365;
  --atlas-link: #3d7150;
  --atlas-selected: #dcebd0;
  --atlas-view-bg: #111a2b;
  --atlas-font: 'Hiragino Maru Gothic ProN', ui-rounded, 'Hiragino Sans', sans-serif;
  --atlas-title: 26px;
  --atlas-heading: 24px;
  --atlas-rail: 220px;
  --atlas-rail-small: 190px;
  --atlas-info: 270px;
  --atlas-choice-height: 65px;
  --atlas-thumb: 50px;
  --atlas-thumb-mobile: 44px;
  --atlas-mobile-choice: 104px;
  --atlas-choice-border: 1px solid #3d7150;
  --atlas-view-height: 70svh;
  --atlas-view-mobile: 60svh;
  --atlas-focus: 3px solid #3d7150;
}