/* ======================================================================
   00-tokens.css | Design Tokens
====================================================================== */

/* =========================
   Common tokens (all themes)
   ========================= */
:root {
  /* 影は“控えめ” */
  --shadow-1: 0 8px 20px rgba(0,0,0,.35);
  --shadow-2: 0 16px 40px rgba(0,0,0,.45);

  /* Radii */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-pill: 9999px;

  /* Spacing */
  --space-1: 4px;
  --space-2: 6px;
  --space-3: 8px;
  --space-4: 10px;
  --space-5: 12px;
  --space-6: 14px;
  --space-7: 16px;
  --space-8: 18px;
  --space-9: 20px;
  --space-10: 24px;

  /* Typography */
  --font-sans: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, 'Noto Sans JP', sans-serif;
  --fz-12: 12px;
  --fz-13: 13px;
  --fz-13-5: 13.5px;
  --fz-14: 14px;
  --fz-15: 15px;
  --fz-16: 16px;
  --fz-18: 18px;
  --fz-20: 20px;
  --fz-22: 22px;
  --fz-28: 28px;

  /* Layout sizes */
  --width-sidebar: 275px;
  --width-main: 600px;
  --width-right: 350px;

  /* Layers */
  --z-mobile-header: 1000;
  --z-overlay: 3000;

  /* Mobile bar heights */
  --height-mobile-header: 56px;
  --height-mobile-footer: 56px;
}

/* =========================
   Dark Theme (default)
   ========================= */
:root,
:root[data-theme="dark"] {
  --color-bg: #0B0F14;
  --color-surface: #111824;
  --color-surface-2: #0F1622;
  --color-border: rgba(255,255,255,.10);

  --color-text: rgba(255,255,255,.92);
  --color-muted: rgba(255,255,255,.62);
  --color-muted-2: rgba(255,255,255,.72);

  --color-link: #7AB8FF;
  --color-primary: #3B82F6;
  --color-hover: #2563EB;
}

/* =========================
   Light Theme
   ========================= */
:root[data-theme="light"] {
  --color-bg: #F6F8FB;
  --color-surface: #FFFFFF;
  --color-surface-2: #EEF1F6;
  --color-border: rgba(0,0,0,.08);

  --color-text: #0B0F14;
  --color-muted: #5B6575;
  --color-muted-2: #3E4755;

  --color-link: #2563EB;
  --color-primary: #2563EB;
  --color-hover: #1D4ED8;
}





/* Dark */
:root,
:root[data-theme="dark"]{
  --app-bg: linear-gradient(180deg, #0B0F14 0%, #0A0D12 100%);
  --color-input-bg: #0c0f12;
  --color-elevated: rgba(255,255,255,.06);
}

/* Light */
:root[data-theme="light"]{
  --app-bg: linear-gradient(180deg, #F7F9FC 0%, #EFF3F8 100%);
  --color-input-bg: #FFFFFF;
  --color-elevated: rgba(0,0,0,.03);

  /* もう少し“締まる”文字 */
  --color-text: #0B1220;
  --color-muted: #5C6677;
  --color-muted-2: #3D4656;

  /* 枠と面 */
  --color-bg: #F6F8FB;
  --color-surface: #FFFFFF;
  --color-surface-2: #F1F4F9;
  --color-border: rgba(10,20,40,.10);

  /* 青はそのままでもOK（少し上品にしたいなら） */
  --color-primary: #2563EB;
  --color-hover: #1D4ED8;
}



:root[data-theme="light"] .file-label,
:root[data-theme="light"] .settings-form button{
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
}