/* ============================================================
   Design Tokens — Dark Pro Workspace
   設計 doc 参照: doc/specs/2026-05-04-mock-redesign-design.md §3

   旧 → 新マッピング:
     --color-primary            → --color-accent (Sky/Cyan に置換)
     --color-bg (white)         → --color-bg-base (#0b0d12)
     --color-bg-canvas (light)  → --color-bg-canvas (#0a0c11, dark)
     --color-bg-muted           → 廃止（--color-bg-input / --color-bg-panel に置換）
     --color-text-inverse       → --color-text-inverse (#0b0d12, accent 上の文字)
     旧 --radius-sm: 6px        → 4px（Dark Pro 標準）
     新規: --color-bg-panel / --color-bg-input(-hover) / --color-border-strong /
           --color-border-accent / --color-text-dim / --color-accent-strong /
           --color-accent-text / --color-accent-soft / --color-accent-border /
           --color-danger / --radius-xs / --shadow-glow / --font-family-mono /
           --letter-spacing-base
   ============================================================ */

:root {
  /* --- Background --- */
  --color-bg-base:        #0b0d12;   /* app background */
  --color-bg-canvas:      #0a0c11;   /* preview area */
  --color-bg-panel:       #0e1117;   /* card / accordion / dock */
  --color-bg-input:       #11151c;   /* fields, chips */
  --color-bg-input-hover: #161b24;
  --color-header-bg:      rgba(11, 13, 18, 0.70);

  /* --- Border --- */
  --color-border:         #1f2530;
  --color-border-strong:  #2a3140;
  --color-border-accent:  #1f4053;

  /* --- Text --- */
  --color-text:           #e7eaf0;
  --color-text-muted:     #9aa3b2;
  --color-text-dim:       #475569;
  --color-text-inverse:   #0b0d12;   /* on accent background */

  /* --- Accent (Sky / Cyan) --- */
  --color-accent:         #38bdf8;
  --color-accent-strong:  #0ea5e9;
  --color-accent-text:    #7dd3fc;
  --color-accent-soft:    rgba(56, 189, 248, 0.10);
  --color-accent-border:  rgba(56, 189, 248, 0.40);

  /* --- Status --- */
  --color-success: #1f8a50;
  --color-warning: #b7791f;
  --color-danger:  #f87171;
  --color-info:    #2563eb;
  --color-favorite: #facc15;
  --color-favorite-soft: rgba(250, 204, 21, 0.16);
  --color-favorite-border: rgba(250, 204, 21, 0.50);

  /* --- Font Family --- */
  --font-family-base: "Geist", "Inter", -apple-system, BlinkMacSystemFont,
                      "Segoe UI", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
  --font-family-heading: "Geist", "Inter", -apple-system, BlinkMacSystemFont,
                         "Hiragino Sans", "Yu Gothic", sans-serif;
  --font-family-mono: ui-monospace, SFMono-Regular, "JetBrains Mono", Menlo, Consolas, monospace;
  --letter-spacing-base: 0;

  /* --- Font Size --- */
  --font-size-xs: 0.75rem;    /* 12px */
  --font-size-2xs: 0.6875rem; /* 11px */
  --font-size-3xs: 0.625rem;  /* 10px */
  --font-size-control: 0.8125rem; /* 13px */
  --font-size-sm: 0.875rem;   /* 14px */
  --font-size-base: 1rem;     /* 16px */
  --font-size-md: 1.125rem;   /* 18px */
  --font-size-lg: 1.5rem;     /* 24px */
  --font-size-xl: 2rem;       /* 32px */
  --font-size-2xl: 2.75rem;   /* 44px */

  /* --- Font Weight --- */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* --- Line Height --- */
  --line-height-tight: 1.2;
  --line-height-base: 1.6;

  /* --- Spacing --- */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 48px;
  --spacing-3xl: 64px;

  /* --- Form Controls --- */
  --control-radio-size: 20px;
  --control-radio-dot-size: 10px;
  --control-padding-block: var(--spacing-sm);
  --control-padding-inline: 10px;
  --control-textarea-min-height: 60px;
  --focus-ring-width: 3px;
  --transition-control: 150ms ease;

  /* --- Border Radius --- */
  --radius-xs: 3px;
  --radius-sm: 4px;    /* Dark Pro 標準（旧 6px → 4px） */
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-pill: 9999px;

  /* --- Shadow --- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.18);
  --shadow-md: 0 8px 24px -8px rgba(0, 0, 0, 0.45);
  --shadow-glow: 0 8px 24px -8px rgba(56, 189, 248, 0.25);
  --shadow-focus: 0 0 0 3px var(--color-accent-soft);

  /* --- Layout --- */
  --content-max-width: 1120px;
  --content-padding: var(--spacing-md);
  --layout-width-form: 720px;
  --layout-grid-gap: 24px;

  /* --- Breakpoint (参照用: メディアクエリ内では var() が使えない) --- */
  /* SM: ~480px (default / mobile-first) */
  /* MD: 481px~ (tablet) */
  /* LG: 960px~ (desktop) */
  /* PRO: 960px = mock の splitter 有効化境界 */
}

[data-theme="light"] {
  /* --- Background --- */
  --color-bg-base:        #f3f6fa;
  --color-bg-canvas:      #f8fafc;
  --color-bg-panel:       #ffffff;
  --color-bg-input:       #eef2f7;
  --color-bg-input-hover: #e2e8f0;
  --color-header-bg:      rgba(255, 255, 255, 0.82);

  /* --- Border --- */
  --color-border:         #d9e2ec;
  --color-border-strong:  #c5d1df;
  --color-border-accent:  #93c5fd;

  /* --- Text --- */
  --color-text:           #172033;
  --color-text-muted:     #526173;
  --color-text-dim:       #94a3b8;
  --color-text-inverse:   #ffffff;

  /* --- Accent (Sky / Cyan) --- */
  --color-accent:         #0369a1;
  --color-accent-strong:  #075985;
  --color-accent-text:    #075985;
  --color-accent-soft:    rgba(2, 132, 199, 0.18);
  --color-accent-border:  rgba(2, 132, 199, 0.58);

  /* --- Status --- */
  --color-success: #15803d;
  --color-warning: #a16207;
  --color-danger:  #dc2626;
  --color-info:    #2563eb;
  --color-favorite: #ca8a04;
  --color-favorite-soft: rgba(202, 138, 4, 0.14);
  --color-favorite-border: rgba(202, 138, 4, 0.42);

  /* --- Shadow --- */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.08);
  --shadow-md: 0 10px 28px -14px rgba(15, 23, 42, 0.22);
  --shadow-glow: 0 10px 28px -14px rgba(2, 132, 199, 0.28);
}