/* ========================================
   正常ラヂヲTools - デフォルトテーマ

   このファイルはサイト全体の「見た目のデータ」だけを管理します。
   HTMLや各画面のCSSを変更せず、このファイルを同じ変数名を持つ
   別のCSSへ差し替えることで、サイト全体を着せ替えられます。
   ======================================== */

:root {
  color-scheme: light;

  /* Typography */
  --font-family-primary: "IBM Plex Sans JP", "IBM Plex Sans",
    "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Hiragino Sans",
    "Noto Sans JP", Meiryo, sans-serif;
  --font-family-monospace: "IBM Plex Mono", "SFMono-Regular", Consolas,
    "Courier New", monospace;
  --font-sans: "Noto Sans JP", "Zen Kaku Gothic New", sans-serif;

  /* Brand and status */
  --color-primary: #f7a501;
  --color-primary-rgb: 247, 165, 1;
  --color-primary-hover: #dd9001;
  --color-badge: #2c8c66;
  --color-danger: #cd4239;
  --color-success: #2c8c66;
  --color-danger-strong: #cd4239;
  --color-danger-bright: #cd4239;
  --color-danger-soft: #f7d6d3;
  --color-danger-text: #cd4239;
  --color-invalid: #cd4239;
  --color-focus: #005fcc;
  --color-focus-soft: #a3b0ff;
  --color-focus-soft-shadow: rgba(163, 176, 255, 0.35);
  --color-social-x: #000000;
  --color-social-x-hover: #222222;
  --color-social-twitter: #1da1f2;

  /* Main site surfaces */
  --color-page-background: #eeefe9;
  --color-background: #eeefe9;
  --color-surface: #23251d;
  --color-surface-dark: #23251d;
  --color-surface-dark-hover: #33342d;
  --color-surface-light: #ffffff;
  --color-surface-subtle: #fcfcfa;
  --color-surface-muted: #fcfcfa;
  --color-surface-panel: #e5e7e0;
  --color-surface-panel-alt: #e5e7e0;
  --color-surface-control: #fcfcfa;
  --color-surface-soft: #e5e7e0;
  --color-surface-rule: #dcdfd2;
  --color-surface-rule-strong: #bfc1b7;
  --color-surface-page-light: #eeefe9;

  /* Main site text and rules */
  --color-text: #23251d;
  --color-body-text: #4d4f46;
  --color-text-on-light: #4d4f46;
  --color-text-strong: #111111;
  --color-text-inverse: #ffffff;
  --color-muted: #4d4f46;
  --color-muted-light: #6c6e63;
  --color-muted-medium: #6c6e63;
  --color-muted-strong: #6c6e63;
  --color-muted-dark: #4d4f46;
  --color-tool-desc: #6c6e63;
  --color-text-subtle: #9b9c92;
  --color-text-subtle-dark: #6c6e63;
  --color-text-faint: #b6b7af;
  --color-placeholder: #9b9c92;
  --color-text-on-dark: #e5e7e0;
  --color-border: #bfc1b7;
  --color-border-light: #bfc1b7;
  --color-border-subtle: #dcdfd2;
  --color-border-faint: #e5e7e0;
  --color-border-on-dark: #4d4f46;
  --color-white: #ffffff;
  --color-black: #000000;

  /* 本文中のリンク（ボタン・CTA は --color-primary） */
  --color-link: #1078a3;
  --color-link-strong: #1d4ed8;

  /* Translucent layers and shadows */
  --shadow-color: rgba(35, 37, 29, 0.1);
  --shadow-color-medium: rgba(35, 37, 29, 0.08);
  --shadow-color-soft: rgba(35, 37, 29, 0.06);
  --shadow-color-faint: rgba(35, 37, 29, 0.05);
  --shadow-color-subtle: rgba(35, 37, 29, 0.04);
  --shadow-color-minimal: rgba(35, 37, 29, 0.03);
  --shadow-color-strong: rgba(35, 37, 29, 0.22);
  --shadow-color-inset: rgba(35, 37, 29, 0.08);
  --overlay-light: rgba(255, 255, 255, 0.15);
  --overlay-light-medium: rgba(255, 255, 255, 0.1);
  --overlay-light-soft: rgba(255, 255, 255, 0.08);
  --overlay-light-faint: rgba(255, 255, 255, 0.06);
  --overlay-light-subtle: rgba(255, 255, 255, 0.04);
  --overlay-background-fade: rgba(238, 239, 233, 0);

  /* Navigation and controls */
  --color-nav-background: #23251d;
  --color-nav-link: #b6b7af;
  --color-nav-link-hover: #ffffff;
  /* 現在開いているページはブランドカラーでハイライトする */
  --color-nav-link-active: #f7a501;
  --color-nav-separator: #6c6e63;
  --color-nav-tab: #6c6e63;
  --color-nav-tab-hover: #9b9c92;
  --color-control-dark: #33342d;
  --color-control-dark-hover: #4d4f46;
  --color-scrollbar: #b6b7af;
  /* 濃色の面（黒い共有ボタン・ダークモードのピル）に載る文字・アイコン */
  --color-share-text: #b6b7af;
  --color-share-text-hover: #ffffff;
  --color-canvas-placeholder: #e5e7e0;
  --color-canvas-placeholder-border: #bfc1b7;
  --color-canvas-loading: #eeefe9;

  /* Log formatter output */
  --log-light-border: #bfc1b7;
  --log-light-heading-background: #e5e7e0;
  --log-light-heading-text: #4d4f46;
  --log-light-cell-background: #ffffff;
  --log-light-tab-background: #f7f8f5;
  --log-light-column-background: rgba(35, 37, 29, 0.03);
  --log-light-page-background: #eeefe9;
  --log-light-page-text: #4d4f46;
  --log-dark-border: #42403e;
  --log-dark-heading-background: #1a1918;
  --log-dark-heading-text: #666666;
  --log-dark-cell-background: #2a2928;
  --log-dark-tab-background: #333230;
  --log-dark-column-background: rgba(128, 128, 128, 0.06);
  --log-dark-page-background: #2a2928;
  --log-dark-page-text: #e0e0e0;
  --log-highlight-border: #6c6e63;
  --log-fallback-speaker-color: #9b9c92;

  /* Rhythm and shape */
  --spacing-xs: 8px;
  --spacing-sm: 12px;
  --spacing-md: 20px;
  --spacing-lg: 30px;
  --spacing-xl: 40px;
  --nav-height: 60px;
  /* ナビ・フッターの外枠幅と、本文カラムの読みやすい上限幅 */
  --site-container: 1280px;
  --site-gutter: 24px;
  --site-content-max: 1000px;
  --border-radius-sm: 4px;
  --border-radius-md: 6px;
  --border-radius-2xs: 2px;
  --border-radius-xs: 3px;
  --border-radius-lg: 7px;
  --border-radius-xl: 8px;
  --border-radius-2xl: 10px;
  --border-radius-3xl: 11px;
  --border-radius-4xl: 12px;
  --border-radius-5xl: 13px;
  --border-radius-6xl: 14px;
  --border-radius-7xl: 16px;
  --border-radius-8xl: 18px;
  --border-radius-9xl: 20px;
  --border-radius-10xl: 22px;
  --border-radius-11xl: 26px;
  --border-radius-12xl: 28px;
  --border-radius-pill: 999px;
  --border-radius-circle: 50%;
  --border-radius-tab: 4px 4px 0 0;
  --border-radius-start: 4px 0 0 4px;
  --border-radius-end: 0 4px 4px 0;
  --border-radius-bottom: 0 0 6px 6px;
  --border-radius-end-md: 0 6px 6px 0;
  --border-width: 1px;
  --transition-fast: 0.15s;
  --transition-normal: 0.3s;

  /* Loredit */
  --paper: #f5f4ed;
  --ivory: #faf9f5;
  --sand: #ece6d9;
  --line: #d9cfbf;
  --line-strong: #cdb59f;
  --ink: #181715;
  --ink-soft: #504b43;
  --ink-muted: #7f776d;
  --terracotta: #c96442;
  --terracotta-soft: #efe1d7;
  --charcoal: #24221e;
  --charcoal-soft: #34312c;
  --charcoal-line: #4a463f;
  --charcoal-text: #ece6dc;
  --charcoal-muted: #c8c0b4;
  --loredit-nav-background: rgba(245, 244, 237, 0.94);
  --loredit-paper-deep: #f1ece3;
  --loredit-accent-light: #d79b7d;
  --loredit-shadow-hero: rgba(20, 20, 19, 0.12);
  --loredit-shadow-card: rgba(20, 20, 19, 0.06);
  --loredit-shadow-section: rgba(20, 20, 19, 0.11);
  --loredit-shadow-image: rgba(24, 23, 21, 0.1);
  --loredit-shadow-image-strong: rgba(24, 23, 21, 0.14);
  --loredit-shadow-image-soft: rgba(24, 23, 21, 0.09);
  --loredit-accent-glow: rgba(201, 100, 66, 0.12);
  --loredit-accent-glow-soft: rgba(201, 100, 66, 0.06);
  --loredit-dark-border: rgba(236, 230, 220, 0.16);
  --loredit-dark-border-strong: rgba(236, 230, 220, 0.42);
  --loredit-dark-border-medium: rgba(236, 230, 220, 0.32);
  --loredit-dark-glass: rgba(250, 249, 245, 0.06);
  --loredit-dark-overlay: rgba(20, 20, 19, 0.84);
  --loredit-dark-panel: rgba(24, 23, 21, 0.86);
  --loredit-shadow-dark: rgba(0, 0, 0, 0.35);
  --loredit-shadow-dark-strong: rgba(0, 0, 0, 0.5);
  --loredit-container: min(1160px, calc(100vw - 40px));
  --loredit-font-body: "Noto Sans JP", sans-serif;
  --loredit-font-display: "Zen Old Mincho", serif;
  --loredit-font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  --loredit-font-zh: "Noto Sans SC", "Noto Sans JP", sans-serif;
  --loredit-font-ko: "Noto Sans KR", "Noto Sans JP", sans-serif;
  --loredit-select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%237f776d' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");

  /* Piceeze */
  --bg: #191918;
  --surface: #2f2f2f;
  --text: rgba(255, 255, 255, 0.95);
  --text-sub: rgba(255, 255, 255, 0.6);
  --text-dim: rgba(255, 255, 255, 0.3);
  --border: rgba(255, 255, 255, 0.13);
  --border-light: rgba(255, 255, 255, 0.08);
  --accent: #2383e2;
  --white: #ffffff;
  --danger: #eb5757;
  --success: #6fcf97;
  --warning: #f2c94c;
  --piceeze-nav-background: rgba(25, 25, 24, 0.88);
  --piceeze-layer-faint: rgba(255, 255, 255, 0.02);
  --piceeze-layer-soft: rgba(255, 255, 255, 0.06);
  --piceeze-layer-medium: rgba(255, 255, 255, 0.08);
  --piceeze-layer-strong: rgba(255, 255, 255, 0.14);
  --piceeze-border-medium: rgba(255, 255, 255, 0.18);
  --piceeze-border-strong: rgba(255, 255, 255, 0.2);
  --piceeze-accent-faint: rgba(35, 131, 226, 0.03);
  --piceeze-accent-soft: rgba(35, 131, 226, 0.08);
  --piceeze-accent-medium: rgba(35, 131, 226, 0.12);
  --piceeze-accent-strong: rgba(35, 131, 226, 0.4);
  --piceeze-container: min(1200px, calc(100vw - 64px));
  --piceeze-font: Inter, -apple-system, "system-ui", "Segoe UI", Helvetica,
    "Apple Color Emoji", Arial, sans-serif;
  --piceeze-mono: SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  /* ========================================
     トップページ（index.html）専用トーン
     クリーム地 + オリーブ墨 + 単色のイエローオレンジ
     ======================================== */

  /* 書体 */
  --top-font: "IBM Plex Sans JP", "IBM Plex Sans", "Zen Kaku Gothic New",
    "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", Meiryo,
    sans-serif;

  /* 面 */
  --top-canvas: #eeefe9;
  --top-surface-soft: #e5e7e0;
  --top-surface-card: #ffffff;
  --top-surface-doc: #fcfcfa;
  --top-surface-dark: #23251d;

  /* 文字 */
  --top-ink: #23251d;
  --top-body: #4d4f46;
  --top-charcoal: #33342d;
  --top-mute: #6c6e63;
  --top-ash: #9b9c92;
  --top-stone: #b6b7af;
  --top-on-dark: #ffffff;

  /* 罫線 */
  --top-hairline: #bfc1b7;
  --top-hairline-soft: #dcdfd2;

  /* ブランド */
  --top-primary: #f7a501;
  --top-primary-pressed: #dd9001;
  --top-primary-active: #b17816;
  --top-on-primary: #23251d;

  /* リンク・バッジ */
  --top-link: #1078a3;
  --top-badge-surface: #dceaf6;
  --top-badge-text: #1d4ed8;
  --top-badge-new-surface: #d9eddf;
  --top-badge-new-text: #2c8c66;

  /* 形・余白 */
  --top-radius-xs: 2px;
  --top-radius-sm: 4px;
  --top-radius-md: 6px;
  --top-radius-lg: 8px;
  --top-radius-pill: 9999px;
  --top-space-xs: 4px;
  --top-space-sm: 8px;
  --top-space-md: 12px;
  --top-space-lg: 16px;
  --top-space-xl: 24px;
  --top-space-2xl: 32px;
  --top-space-section: 80px;
  --top-container: 1280px;
  --top-gutter: 24px;

  /* プロダクトカードの左に置くサイト名の列幅 */
  --top-lede-width: 440px;

  /* ツール一覧の帯から張り出す半円（直径と半径） */
  --top-arch-width: 240px;
  --top-arch-rise: 120px;
  --top-arch-cover: 24px;

  /* ツール一覧の下に置くカルーセル */
  --top-rail-gap: 16px;
}