/* === tokens.css === */
/* =============================================================
   Apple-inspired SaaS Design System — Design Tokens
   仕様書 §3 に基づくCSS変数定義
   Light = :root / Dark = [data-theme="dark"]（prefers-color-scheme フォールバック付き）
   ============================================================= */

:root {
  /* ---------- Primitives: Neutral ---------- */
  --primitive-neutral-0:   #FFFFFF;
  --primitive-neutral-25:  #F9F9FB;
  --primitive-neutral-50:  #F5F5F7;
  --primitive-neutral-100: #ECECF0;
  --primitive-neutral-200: #DDDEE3;
  --primitive-neutral-300: #C9CBD3;
  --primitive-neutral-500: #8B9098;
  --primitive-neutral-600: #727781;
  --primitive-neutral-700: #5F6368;
  --primitive-neutral-800: #3D4148;
  --primitive-neutral-900: #1C1C1E;
  --primitive-neutral-950: #111214;

  /* ---------- Primitives: Accent / Feedback ---------- */
  --primitive-blue-400:   #409CFF;
  --primitive-blue-500:   #0A84FF;
  --primitive-blue-600:   #0077ED;
  --primitive-blue-700:   #0066D6;
  --primitive-green-500:  #2FB344;
  --primitive-yellow-500: #F5A524;
  --primitive-red-500:    #E5484D;
  --primitive-red-600:    #D9363E;

  /* ---------- Spacing ---------- */
  --space-0:  0px;
  --space-2:  2px;
  --space-4:  4px;
  --space-8:  8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-64: 64px;

  /* ---------- Radius ---------- */
  --radius-none: 0px;
  --radius-xs:   6px;
  --radius-sm:   8px;
  --radius-md:   10px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  20px;
  --radius-pill: 999px;

  /* ---------- Size ---------- */
  --size-control-sm: 28px;
  --size-control-md: 32px;
  --size-control-lg: 40px;
  --size-icon-xs:    12px;
  --size-icon-sm:    16px;
  --size-icon-md:    20px;
  --size-icon-lg:    24px;
  --size-toggle-w:   44px;
  --size-toggle-h:   24px;
  --size-toggle-thumb: 20px;
  --size-sidebar-w:  240px;

  /* ---------- Typography ---------- */
  --font-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --type-display-lg-size: 32px; --type-display-lg-lh: 38px; --type-display-lg-ls: -0.02em; --type-display-lg-weight: 600;
  --type-display-md-size: 28px; --type-display-md-lh: 34px; --type-display-md-ls: -0.01em; --type-display-md-weight: 600;
  --type-h1-size: 24px; --type-h1-lh: 30px; --type-h1-ls: -0.01em;   --type-h1-weight: 600;
  --type-h2-size: 20px; --type-h2-lh: 26px; --type-h2-ls: -0.005em;  --type-h2-weight: 600;
  --type-h3-size: 16px; --type-h3-lh: 22px; --type-h3-ls: 0;         --type-h3-weight: 600;
  --type-body-lg-size: 15px; --type-body-lg-lh: 22px; --type-body-lg-weight: 400;
  --type-body-md-size: 14px; --type-body-md-lh: 21px; --type-body-md-weight: 400;
  --type-body-sm-size: 13px; --type-body-sm-lh: 19px; --type-body-sm-weight: 400;
  --type-label-lg-size: 14px; --type-label-lg-lh: 18px; --type-label-lg-weight: 500;
  --type-label-md-size: 13px; --type-label-md-lh: 16px; --type-label-md-weight: 500;
  --type-caption-size: 12px; --type-caption-lh: 16px; --type-caption-weight: 500;
  --type-mono-sm-size: 12px; --type-mono-sm-lh: 18px; --type-mono-sm-weight: 500;
  --type-mono-md-size: 13px; --type-mono-md-lh: 19px; --type-mono-md-weight: 500;

  /* ============ Semantic (Light) ============ */
  /* Background / Surface */
  --color-bg-base:          #F5F5F7;
  --color-bg-subtle:        #F9F9FB;
  --color-bg-surface:       rgba(255,255,255,0.80);
  --color-bg-surface-solid: #FFFFFF;
  --color-bg-hover:         rgba(0,0,0,0.031);   /* #00000008 */
  --color-bg-pressed:       rgba(0,0,0,0.071);   /* #00000012 */
  --color-bg-selected:      rgba(10,132,255,0.078); /* #0A84FF14 */
  --color-bg-disabled:      rgba(0,0,0,0.024);   /* #00000006 */
  --color-bg-backdrop:      rgba(0,0,0,0.32);     /* modal scrim */

  /* Text */
  --color-text-primary:   #111111;
  --color-text-secondary: #5F6368;
  --color-text-tertiary:  #8B9098;
  --color-text-inverse:   #FFFFFF;
  --color-text-accent:    #0A84FF;
  --color-text-danger:    #D13438;
  --color-text-disabled:  #A9ADB5;

  /* Border */
  --color-border-subtle:  rgba(0,0,0,0.078);  /* #00000014 */
  --color-border-default: rgba(0,0,0,0.42);   /* strengthened for 3:1 UI boundary */
  --color-border-strong:  rgba(0,0,0,0.54);   /* strengthened for hierarchy */
  --color-border-accent:  #0A84FF;
  --color-border-danger:  #E5484D;

  /* Accent / Feedback */
  --color-accent-default:    #0A84FF;
  --color-accent-hover:      #0077ED;
  --color-accent-pressed:    #0066D6;
  --color-accent-focus-ring: rgba(10,132,255,0.20); /* #0A84FF33 */
  --color-success-default:   #2FB344;
  --color-warning-default:   #F5A524;
  --color-danger-default:    #E5484D;
  --color-danger-hover:      #D9363E;

  /* ============ Effects (Light) ============ */
  --effect-shadow-xs:    0px 1px 2px 0px rgba(0,0,0,0.059);
  --effect-shadow-sm:    0px 2px 8px 0px rgba(0,0,0,0.078);
  --effect-shadow-md:    0px 8px 24px -4px rgba(0,0,0,0.122);
  --effect-shadow-lg:    0px 16px 40px -8px rgba(0,0,0,0.161);
  --effect-shadow-focus: 0px 0px 0px 2px rgba(10,132,255,0.20);
  --effect-blur-surface: 20px;

  /* ============ Component (Light) ============ */
  /* Button — Primary */
  --comp-button-primary-bg:         #0066D6;
  --comp-button-primary-bg-hover:   var(--color-accent-hover);
  --comp-button-primary-bg-pressed: var(--color-accent-pressed);
  --comp-button-primary-fg:         var(--color-text-inverse);
  /* Button — Secondary */
  --comp-button-secondary-bg:         var(--color-bg-surface-solid);
  --comp-button-secondary-bg-hover:   var(--color-bg-hover);
  --comp-button-secondary-bg-pressed: var(--color-bg-pressed);
  --comp-button-secondary-fg:         var(--color-text-primary);
  --comp-button-secondary-border:     var(--color-border-default);
  /* Button — Tertiary */
  --comp-button-tertiary-bg:         transparent;
  --comp-button-tertiary-bg-hover:   var(--color-bg-hover);
  --comp-button-tertiary-bg-pressed: var(--color-bg-pressed);
  --comp-button-tertiary-fg:         var(--color-text-accent);
  /* Button — Danger */
  --comp-button-danger-bg:         #C62828;
  --comp-button-danger-bg-hover:   #B71C1C;
  --comp-button-danger-bg-pressed: #A51714;
  --comp-button-danger-fg:         var(--color-text-inverse);
  /* Toggle */
  --comp-toggle-track-off: var(--color-border-strong);
  --comp-toggle-track-on:  var(--color-accent-default);
  --comp-toggle-thumb:     #FFFFFF;
  /* Input */
  --comp-input-bg:        var(--color-bg-surface-solid);
  --comp-input-border:    var(--color-border-default);
  --comp-input-border-hover: var(--color-border-strong);
  --comp-input-border-focus: var(--color-border-accent);
  --comp-input-placeholder:  var(--color-text-tertiary);
}

/* ============ Semantic / Effects / Component (Dark) ============ */
[data-theme="dark"] {
  --color-bg-base:          #111214;
  --color-bg-subtle:        #15171A;
  --color-bg-surface:       rgba(28,28,30,0.80);
  --color-bg-surface-solid: #1C1C1E;
  --color-bg-hover:         rgba(255,255,255,0.051); /* #FFFFFF0D */
  --color-bg-pressed:       rgba(255,255,255,0.078); /* #FFFFFF14 */
  --color-bg-selected:      rgba(10,132,255,0.141);  /* #0A84FF24 */
  --color-bg-disabled:      rgba(255,255,255,0.031); /* #FFFFFF08 */
  --color-bg-backdrop:      rgba(0,0,0,0.5);

  --color-text-primary:   #F5F5F7;
  --color-text-secondary: #A1A6AD;
  --color-text-tertiary:  #8B9098;
  --color-text-inverse:   #111111;
  --color-text-accent:    #5CADFF;
  --color-text-danger:    #FF7B72;
  --color-text-disabled:  #6B7078;

  --color-border-subtle:  rgba(255,255,255,0.078);
  --color-border-default: rgba(255,255,255,0.42);
  --color-border-strong:  rgba(255,255,255,0.54);
  --color-border-accent:  #5CADFF;
  --color-border-danger:  #FF7B72;

  --color-accent-default:    #5CADFF;
  --color-accent-hover:      #409CFF;
  --color-accent-pressed:    #2E8FFF;
  --color-accent-focus-ring: rgba(92,173,255,0.30);
  --color-success-default:   #47C764;
  --color-warning-default:   #FFB74D;
  --color-danger-default:    #FF7B72;
  --color-danger-hover:      #FF6660;

  --effect-shadow-xs:    0px 1px 2px 0px rgba(0,0,0,0.161);
  --effect-shadow-sm:    0px 4px 12px 0px rgba(0,0,0,0.239);
  --effect-shadow-md:    0px 10px 30px -4px rgba(0,0,0,0.322);
  --effect-shadow-lg:    0px 18px 48px -8px rgba(0,0,0,0.40);
  --effect-shadow-focus: 0px 0px 0px 2px rgba(92,173,255,0.30);

  --comp-button-primary-bg:         var(--color-accent-default);
  --comp-button-primary-bg-hover:   var(--color-accent-hover);
  --comp-button-primary-bg-pressed: var(--color-accent-pressed);
  --comp-button-danger-bg:          var(--color-danger-default);
  --comp-button-danger-bg-hover:    var(--color-danger-hover);
  --comp-button-danger-bg-pressed:  #E5484D;
  --comp-toggle-thumb: #FFFFFF;
}

/* prefers-color-scheme フォールバック（data-theme 未指定時のみ適用） */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg-base:          #111214;
    --color-bg-subtle:        #15171A;
    --color-bg-surface:       rgba(28,28,30,0.80);
    --color-bg-surface-solid: #1C1C1E;
    --color-bg-hover:         rgba(255,255,255,0.051);
    --color-bg-pressed:       rgba(255,255,255,0.078);
    --color-bg-selected:      rgba(10,132,255,0.141);
    --color-bg-disabled:      rgba(255,255,255,0.031);
    --color-text-primary:   #F5F5F7;
    --color-text-secondary: #A1A6AD;
    --color-text-tertiary:  #8B9098;
    --color-text-inverse:   #111111;
    --color-text-accent:    #5CADFF;
    --color-text-danger:    #FF7B72;
    --color-text-disabled:  #6B7078;
    --color-border-subtle:  rgba(255,255,255,0.078);
    --color-border-default: rgba(255,255,255,0.42);
    --color-border-strong:  rgba(255,255,255,0.54);
    --color-border-accent:  #5CADFF;
    --color-border-danger:  #FF7B72;
    --color-accent-default:    #5CADFF;
    --color-accent-hover:      #409CFF;
    --color-accent-pressed:    #2E8FFF;
    --color-accent-focus-ring: rgba(92,173,255,0.30);
    --color-success-default:   #47C764;
    --color-warning-default:   #FFB74D;
    --color-danger-default:    #FF7B72;
    --color-danger-hover:      #FF6660;
    --effect-shadow-xs:    0px 1px 2px 0px rgba(0,0,0,0.161);
    --effect-shadow-sm:    0px 4px 12px 0px rgba(0,0,0,0.239);
    --effect-shadow-md:    0px 10px 30px -4px rgba(0,0,0,0.322);
    --effect-shadow-lg:    0px 18px 48px -8px rgba(0,0,0,0.40);
    --effect-shadow-focus: 0px 0px 0px 2px rgba(92,173,255,0.30);
  }
}

/* === components.css === */
/* =============================================================
   Components — Atoms (Button / Toggle / Text Field)
   すべて tokens.css の CSS変数を参照（色・余白・角丸の直値指定なし）
   ============================================================= */

/* ---------------- Button ---------------- */
.ds-btn {
  --_h: var(--size-control-md);
  --_px: var(--space-14, 14px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  height: var(--_h);
  padding-inline: var(--_px);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: var(--type-label-md-size);
  line-height: var(--type-label-md-lh);
  font-weight: var(--type-label-md-weight);
  letter-spacing: 0;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, color .15s ease;
  position: relative;
  -webkit-appearance: none;
  appearance: none;
}
.ds-btn:focus-visible { outline: none; box-shadow: var(--effect-shadow-focus); }

/* sizes */
.ds-btn--sm { --_h: var(--size-control-sm); --_px: 12px; }
.ds-btn--md { --_h: var(--size-control-md); --_px: 14px; }
.ds-btn--lg { --_h: var(--size-control-lg); --_px: 16px;
  font-size: var(--type-label-lg-size); line-height: var(--type-label-lg-lh); font-weight: var(--type-label-lg-weight); }

/* style: primary */
.ds-btn--primary { background: var(--comp-button-primary-bg); color: var(--comp-button-primary-fg); }
.ds-btn--primary:hover { background: var(--comp-button-primary-bg-hover); }
.ds-btn--primary:active { background: var(--comp-button-primary-bg-pressed); }
/* style: secondary */
.ds-btn--secondary { background: var(--comp-button-secondary-bg); color: var(--comp-button-secondary-fg);
  border-color: var(--comp-button-secondary-border); box-shadow: var(--effect-shadow-xs); }
.ds-btn--secondary:hover { background: var(--comp-button-secondary-bg-hover); }
.ds-btn--secondary:active { background: var(--comp-button-secondary-bg-pressed); }
/* style: tertiary */
.ds-btn--tertiary { background: var(--comp-button-tertiary-bg); color: var(--comp-button-tertiary-fg); }
.ds-btn--tertiary:hover { background: var(--comp-button-tertiary-bg-hover); }
.ds-btn--tertiary:active { background: var(--comp-button-tertiary-bg-pressed); }
/* style: danger */
.ds-btn--danger { background: var(--comp-button-danger-bg); color: var(--comp-button-danger-fg); }
.ds-btn--danger:hover { background: var(--comp-button-danger-bg-hover); }
.ds-btn--danger:active { background: var(--comp-button-danger-bg-pressed); }

/* disabled */
.ds-btn:disabled, .ds-btn[aria-disabled="true"] {
  cursor: not-allowed; box-shadow: none;
  background: var(--color-bg-disabled); color: var(--color-text-disabled); border-color: transparent;
}
/* loading: keep width, hide label, show spinner */
.ds-btn[data-loading="true"] { color: transparent !important; pointer-events: none; }
.ds-btn[data-loading="true"] .ds-btn__spinner { display: inline-block; }
.ds-btn__spinner {
  display: none; position: absolute; width: 16px; height: 16px;
  border: 2px solid currentColor; border-top-color: transparent; border-radius: var(--radius-pill);
  animation: ds-spin .7s linear infinite; color: var(--comp-button-primary-fg);
}
.ds-btn--primary[data-loading="true"] .ds-btn__spinner,
.ds-btn--danger[data-loading="true"]  .ds-btn__spinner { color: var(--color-text-inverse); }
.ds-btn--secondary[data-loading="true"] .ds-btn__spinner,
.ds-btn--tertiary[data-loading="true"]  .ds-btn__spinner { color: var(--color-text-primary); }
@keyframes ds-spin { to { transform: rotate(360deg); } }
.ds-btn__icon { width: var(--size-icon-sm); height: var(--size-icon-sm); display: inline-flex; }
.ds-btn--lg .ds-btn__icon { width: var(--size-icon-md); height: var(--size-icon-md); }

/* ---------------- Toggle ---------------- */
.ds-toggle { display: inline-flex; align-items: flex-start; gap: var(--space-12); font-family: var(--font-sans); }
.ds-toggle--stacked { flex-direction: column; gap: var(--space-4); align-items: flex-start; }
.ds-toggle__switch {
  position: relative; flex: none; width: var(--size-toggle-w); height: var(--size-toggle-h);
  border-radius: var(--radius-pill); background: var(--comp-toggle-track-off);
  border: none; cursor: pointer; padding: 0; transition: background-color .18s ease;
  -webkit-appearance: none; appearance: none;
}
.ds-toggle__switch[aria-checked="true"] { background: var(--comp-toggle-track-on); }
.ds-toggle__switch:focus-visible { outline: none; box-shadow: var(--effect-shadow-focus); }
.ds-toggle__thumb {
  position: absolute; top: 2px; left: 2px;
  width: var(--size-toggle-thumb); height: var(--size-toggle-thumb);
  border-radius: var(--radius-pill); background: var(--comp-toggle-thumb);
  box-shadow: var(--effect-shadow-sm); transition: transform .18s cubic-bezier(.3,.7,.4,1);
}
.ds-toggle__switch[aria-checked="true"] .ds-toggle__thumb { transform: translateX(20px); }
.ds-toggle__switch:disabled { cursor: not-allowed; opacity: .5; }
.ds-toggle__text { display: flex; flex-direction: column; gap: var(--space-4); }
.ds-toggle__label { font-size: var(--type-label-lg-size); line-height: var(--type-label-lg-lh);
  font-weight: var(--type-label-lg-weight); color: var(--color-text-primary); }
.ds-toggle__desc { font-size: var(--type-body-sm-size); line-height: var(--type-body-sm-lh);
  color: var(--color-text-secondary); }

/* ---------------- Text Field ---------------- */
.ds-field { display: flex; flex-direction: column; gap: var(--space-4); font-family: var(--font-sans); }
.ds-field__label { font-size: var(--type-label-md-size); line-height: var(--type-label-md-lh);
  font-weight: var(--type-label-md-weight); color: var(--color-text-primary); }
.ds-field__box {
  display: flex; align-items: center; gap: var(--space-8);
  height: var(--size-control-lg); padding-inline: var(--space-12);
  background: var(--comp-input-bg); border: 1px solid var(--comp-input-border);
  border-radius: var(--radius-md); transition: border-color .15s ease, box-shadow .15s ease;
}
.ds-field--sm .ds-field__box { height: var(--size-control-md); }
.ds-field__box:hover { border-color: var(--comp-input-border-hover); }
.ds-field__box:focus-within { border-color: var(--comp-input-border-focus); box-shadow: var(--effect-shadow-focus); }
.ds-field__input {
  flex: 1; min-width: 0; border: none; background: transparent; outline: none;
  font-family: var(--font-sans); font-size: var(--type-body-md-size);
  line-height: var(--type-body-md-lh); color: var(--color-text-primary);
}
.ds-field--sm .ds-field__input { font-size: var(--type-body-sm-size); line-height: var(--type-body-sm-lh); }
.ds-field__input::placeholder { color: var(--comp-input-placeholder); }
.ds-field__icon { width: var(--size-icon-sm); height: var(--size-icon-sm); color: var(--color-text-tertiary); flex: none; }
.ds-field--error .ds-field__box { border-color: var(--color-border-danger); }
.ds-field--error .ds-field__box:focus-within { box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-border-danger) 25%, transparent); }
.ds-field--disabled .ds-field__box { background: var(--color-bg-disabled); cursor: not-allowed; }
.ds-field--disabled .ds-field__input { color: var(--color-text-disabled); }
.ds-field__assist { font-size: var(--type-caption-size); line-height: var(--type-caption-lh); color: var(--color-text-secondary); }
.ds-field__assist--error { color: var(--color-text-danger); display: inline-flex; align-items: center; gap: var(--space-4); }

/* === molecules.css === */
/* =============================================================
   Molecules — SelectField / FormField / InputGroup / SearchField / SettingRow / ButtonGroup
   すべて tokens.css の CSS変数を参照（色・余白・角丸の直値指定なし）
   ============================================================= */

/* ============================================================= */
/* M5 — SelectField                                              */
/* ============================================================= */
.ds-select {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  font-family: var(--font-sans);
}

.ds-select__label {
  font-size: var(--type-label-md-size);
  line-height: var(--type-label-md-lh);
  font-weight: var(--type-label-md-weight);
  color: var(--color-text-primary);
}

.ds-select__box {
  position: relative;
  display: flex;
  align-items: center;
  height: var(--size-control-lg);
  background: var(--comp-input-bg);
  border: 1px solid var(--comp-input-border);
  border-radius: var(--radius-md);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.ds-select--sm .ds-select__box {
  height: var(--size-control-md);
}

.ds-select__box:hover {
  border-color: var(--comp-input-border-hover);
}
.ds-select__box:focus-within {
  border-color: var(--comp-input-border-focus);
  box-shadow: var(--effect-shadow-focus);
}

.ds-select__native {
  appearance: none;
  -webkit-appearance: none;
  flex: 1;
  min-width: 0;
  height: 100%;
  padding-inline: var(--space-12);
  padding-right: var(--space-32);
  border: none;
  background: transparent;
  outline: none;
  font-family: var(--font-sans);
  font-size: var(--type-body-md-size);
  line-height: var(--type-body-md-lh);
  color: var(--color-text-primary);
  cursor: pointer;
}
.ds-select--sm .ds-select__native {
  font-size: var(--type-body-sm-size);
  line-height: var(--type-body-sm-lh);
}

.ds-select__native option[disabled] {
  color: var(--color-text-tertiary);
}

.ds-select__chevron {
  position: absolute;
  right: var(--space-12);
  width: var(--size-icon-sm);
  height: var(--size-icon-sm);
  color: var(--color-text-tertiary);
  pointer-events: none;
}

.ds-select--error .ds-select__box {
  border-color: var(--color-border-danger);
}
.ds-select--error .ds-select__box:focus-within {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-border-danger) 25%, transparent);
}

.ds-select--disabled .ds-select__box {
  background: var(--color-bg-disabled);
  cursor: not-allowed;
}
.ds-select--disabled .ds-select__native {
  color: var(--color-text-disabled);
  cursor: not-allowed;
}

.ds-select__assist {
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-lh);
  color: var(--color-text-secondary);
}
.ds-select__assist--error {
  color: var(--color-text-danger);
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
}
.ds-select__assist-icon {
  width: var(--size-icon-sm);
  height: var(--size-icon-sm);
  flex: none;
}

/* ============================================================= */
/* M1 — FormField                                                */
/* ============================================================= */
.ds-form-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  font-family: var(--font-sans);
}
.ds-form-field--horizontal {
  flex-direction: row;
  align-items: flex-start;
  gap: var(--space-16);
}
.ds-form-field--horizontal .ds-form-field__label-area {
  flex: none;
  min-width: 120px;
  padding-top: var(--space-8);
}
.ds-form-field--horizontal .ds-form-field__control {
  flex: 1;
  min-width: 0;
}

.ds-form-field__label {
  font-size: var(--type-label-md-size);
  line-height: var(--type-label-md-lh);
  font-weight: var(--type-label-md-weight);
  color: var(--color-text-primary);
}
.ds-form-field__required {
  color: var(--color-text-danger);
  margin-left: var(--space-2);
}

.ds-form-field__assist {
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-lh);
  color: var(--color-text-secondary);
}
.ds-form-field__assist--error {
  color: var(--color-text-danger);
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
}
.ds-form-field__assist-icon {
  width: var(--size-icon-sm);
  height: var(--size-icon-sm);
  flex: none;
}

/* ============================================================= */
/* M2 — InputGroup                                               */
/* ============================================================= */
.ds-input-group {
  display: flex;
  align-items: stretch;
  font-family: var(--font-sans);
}

.ds-input-group__addon {
  display: flex;
  align-items: center;
  padding-inline: var(--space-12);
  background: var(--color-bg-subtle);
  border: 1px solid var(--comp-input-border);
  color: var(--color-text-secondary);
  font-size: var(--type-body-md-size);
  line-height: var(--type-body-md-lh);
  white-space: nowrap;
}
.ds-input-group--sm .ds-input-group__addon {
  font-size: var(--type-body-sm-size);
  line-height: var(--type-body-sm-lh);
}

/* Joined borders: remove inner radius and overlapping borders */
.ds-input-group > :first-child {
  border-top-left-radius: var(--radius-md);
  border-bottom-left-radius: var(--radius-md);
  border-top-right-radius: var(--radius-none);
  border-bottom-right-radius: var(--radius-none);
}
.ds-input-group > :last-child {
  border-top-right-radius: var(--radius-md);
  border-bottom-right-radius: var(--radius-md);
  border-top-left-radius: var(--radius-none);
  border-bottom-left-radius: var(--radius-none);
}
.ds-input-group > :not(:first-child):not(:last-child) {
  border-radius: var(--radius-none);
}
.ds-input-group > :not(:first-child) {
  margin-left: -1px;
}

/* Override TextField box radius within InputGroup */
.ds-input-group .ds-field {
  flex: 1;
  min-width: 0;
}
.ds-input-group .ds-field__box {
  border-radius: inherit;
}

/* Override Button radius within InputGroup */
.ds-input-group .ds-btn {
  border-radius: inherit;
  flex: none;
}

/* Focus-within: bring focused element to front */
.ds-input-group > :focus-within {
  z-index: 1;
}

/* Error state */
.ds-input-group--error .ds-input-group__addon {
  border-color: var(--color-border-danger);
}

/* ============================================================= */
/* M4 — SearchField                                              */
/* ============================================================= */
.ds-search {
  position: relative;
  display: flex;
  flex-direction: column;
  font-family: var(--font-sans);
}

.ds-search__icon {
  width: var(--size-icon-sm);
  height: var(--size-icon-sm);
  color: var(--color-text-tertiary);
  flex: none;
}

.ds-search__clear {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--size-icon-md);
  height: var(--size-icon-md);
  border: none;
  background: transparent;
  border-radius: var(--radius-pill);
  color: var(--color-text-tertiary);
  cursor: pointer;
  padding: 0;
  flex: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.ds-search__clear:hover {
  background: var(--color-bg-hover);
  color: var(--color-text-secondary);
}
.ds-search__clear:focus-visible {
  outline: none;
  box-shadow: var(--effect-shadow-focus);
}

.ds-search__spinner {
  width: var(--size-icon-sm);
  height: var(--size-icon-sm);
  border: 2px solid var(--color-accent-default);
  border-top-color: transparent;
  border-radius: var(--radius-pill);
  animation: ds-spin 0.7s linear infinite;
  flex: none;
}

/* ============================================================= */
/* M3 — SettingRow                                               */
/* ============================================================= */
.ds-setting-row {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  padding: var(--space-16);
  font-family: var(--font-sans);
}

.ds-setting-row--divider {
  border-bottom: 1px solid var(--color-border-subtle);
}

.ds-setting-row--disabled {
  opacity: 0.5;
  pointer-events: none;
}

.ds-setting-row__text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.ds-setting-row__title {
  font-size: var(--type-label-lg-size);
  line-height: var(--type-label-lg-lh);
  font-weight: var(--type-label-lg-weight);
  color: var(--color-text-primary);
}

.ds-setting-row__desc {
  font-size: var(--type-body-sm-size);
  line-height: var(--type-body-sm-lh);
  color: var(--color-text-secondary);
}

.ds-setting-row__action {
  flex: none;
}

/* ============================================================= */
/* M6 — ButtonGroup                                              */
/* ============================================================= */
.ds-btn-group {
  display: inline-flex;
  font-family: var(--font-sans);
}

/* actions mode */
.ds-btn-group--actions {
  gap: var(--space-12);
}
.ds-btn-group--actions.ds-btn-group--end {
  justify-content: flex-end;
}

/* segmented mode */
.ds-btn-group--segmented {
  gap: 0;
}

.ds-btn-group--segmented > .ds-btn {
  border-radius: var(--radius-none);
}
.ds-btn-group--segmented > .ds-btn:first-child {
  border-top-left-radius: var(--radius-md);
  border-bottom-left-radius: var(--radius-md);
}
.ds-btn-group--segmented > .ds-btn:last-child {
  border-top-right-radius: var(--radius-md);
  border-bottom-right-radius: var(--radius-md);
}
.ds-btn-group--segmented > .ds-btn:not(:first-child) {
  margin-left: -1px;
}
.ds-btn-group--segmented > .ds-btn[aria-pressed="true"] {
  background: var(--color-bg-selected);
  color: var(--color-text-accent);
  border-color: var(--color-border-accent);
  z-index: 1;
}

/* === modal.css === */
/* =============================================================
   Components — Organism (Modal)  仕様書 §4.4
   ============================================================= */

.ds-modal__backdrop {
  position: fixed; inset: 0; z-index: 1000;
  background: var(--color-bg-backdrop);
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-24);
  animation: ds-modal-fade .15s ease;
}


.ds-modal__dialog {
  position: relative; width: 560px; max-width: 100%; max-height: calc(100vh - 48px);
  display: flex; flex-direction: column;
  background: var(--color-bg-surface-solid);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-xl);
  box-shadow: var(--effect-shadow-lg);
  animation: ds-modal-pop .18s cubic-bezier(.3,.7,.4,1.1);
  font-family: var(--font-sans);
  overflow: hidden;
}
.ds-modal--sm .ds-modal__dialog { width: 400px; }
.ds-modal--md .ds-modal__dialog { width: 560px; }
.ds-modal--lg .ds-modal__dialog { width: 720px; }

/* padding token per size */
.ds-modal--sm { --_pad: var(--space-20); }
.ds-modal--md, .ds-modal--lg { --_pad: var(--space-24); }

.ds-modal__header {
  display: flex; align-items: flex-start; gap: var(--space-12);
  padding: var(--_pad) var(--_pad) var(--space-8);
}
.ds-modal__header-icon {
  flex: none; width: 36px; height: 36px; border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  background: var(--color-bg-selected); color: var(--color-accent-default);
}
.ds-modal--destructive .ds-modal__header-icon {
  background: color-mix(in srgb, var(--color-danger-default) 14%, transparent);
  color: var(--color-danger-default);
}
.ds-modal__title-area { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.ds-modal__title {
  font-size: var(--type-h2-size); line-height: var(--type-h2-lh); letter-spacing: var(--type-h2-ls);
  font-weight: 600; color: var(--color-text-primary); margin: 0;
}
.ds-modal--sm .ds-modal__title { font-size: var(--type-h3-size); line-height: var(--type-h3-lh); }
.ds-modal__desc {
  font-size: var(--type-body-md-size); line-height: var(--type-body-md-lh);
  color: var(--color-text-secondary); margin: 0;
}
.ds-modal__close {
  flex: none; width: 28px; height: 28px; border: none; cursor: pointer;
  border-radius: var(--radius-sm); background: transparent; color: var(--color-text-tertiary);
  display: flex; align-items: center; justify-content: center; transition: background-color .15s ease;
}
.ds-modal__close:hover { background: var(--color-bg-hover); color: var(--color-text-secondary); }
.ds-modal__close:focus-visible { outline: none; box-shadow: var(--effect-shadow-focus); }

.ds-modal__body {
  padding: var(--space-8) var(--_pad);
  overflow-y: auto;
  font-size: var(--type-body-md-size); line-height: var(--type-body-md-lh);
  color: var(--color-text-secondary);
}

.ds-modal__footer {
  display: flex; gap: var(--space-12); justify-content: flex-end;
  padding: var(--space-16) var(--_pad) var(--_pad);
}
.ds-modal--single .ds-modal__footer { /* primary only */ }

/* loading overlay */
.ds-modal--loading .ds-modal__dialog::after {
  content: ""; position: absolute; inset: 0; background: var(--color-bg-surface);
  backdrop-filter: blur(1px);
}
.ds-modal--loading .ds-modal__spinner {
  position: absolute; z-index: 1; top: 50%; left: 50%; width: 24px; height: 24px;
  margin: -12px 0 0 -12px; border: 2px solid var(--color-accent-default);
  border-top-color: transparent; border-radius: var(--radius-pill);
  animation: ds-spin .7s linear infinite;
}

@keyframes ds-modal-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ds-modal-pop { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }

@media (max-width: 560px) {
  .ds-modal--sm .ds-modal__dialog,
  .ds-modal--md .ds-modal__dialog,
  .ds-modal--lg .ds-modal__dialog { width: 100%; }
}

/* === organisms.css === */
/* =============================================================
   Organisms — Toast / Tabs / DropdownMenu / DataTable / AppShell
   すべて tokens.css の CSS変数を参照（色・余白・角丸の直値指定なし）
   ============================================================= */

/* ============================================================= */
/* O1 — Toast                                                     */
/* ============================================================= */
.ds-toast-viewport {
  position: fixed;
  bottom: var(--space-24);
  right: var(--space-24);
  z-index: 2000;
  display: flex;
  flex-direction: column-reverse;
  gap: var(--space-8);
  max-width: 420px;
  width: 100%;
  pointer-events: none;
}

.ds-toast {
  display: flex;
  align-items: flex-start;
  gap: var(--space-12);
  padding: var(--space-12) var(--space-16);
  background: var(--color-bg-surface-solid);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--effect-shadow-md);
  font-family: var(--font-sans);
  pointer-events: auto;
  animation: ds-toast-enter 0.2s ease;
}

.ds-toast--exiting {
  animation: ds-toast-exit 0.15s ease forwards;
}

@keyframes ds-toast-enter {
  from { opacity: 0; transform: translateX(100%); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes ds-toast-exit {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(100%); }
}

.ds-toast__icon {
  flex: none;
  width: var(--size-icon-md);
  height: var(--size-icon-md);
  margin-top: var(--space-2);
}

.ds-toast--info .ds-toast__icon    { color: var(--color-accent-default); }
.ds-toast--success .ds-toast__icon { color: var(--color-success-default); }
.ds-toast--warning .ds-toast__icon { color: var(--color-warning-default); }
.ds-toast--danger .ds-toast__icon  { color: var(--color-danger-default); }

.ds-toast__content {
  flex: 1;
  min-width: 0;
}

.ds-toast__title {
  font-size: var(--type-label-lg-size);
  line-height: var(--type-label-lg-lh);
  font-weight: var(--type-label-lg-weight);
  color: var(--color-text-primary);
}

.ds-toast__description {
  font-size: var(--type-body-sm-size);
  line-height: var(--type-body-sm-lh);
  color: var(--color-text-secondary);
  margin-top: var(--space-2);
}

.ds-toast__action {
  margin-top: var(--space-8);
}

.ds-toast__close {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--size-icon-md);
  height: var(--size-icon-md);
  border: none;
  background: transparent;
  border-radius: var(--radius-xs);
  color: var(--color-text-tertiary);
  cursor: pointer;
  padding: 0;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.ds-toast__close:hover {
  background: var(--color-bg-hover);
  color: var(--color-text-secondary);
}
.ds-toast__close:focus-visible {
  outline: none;
  box-shadow: var(--effect-shadow-focus);
}

/* ============================================================= */
/* O2 — Tabs                                                      */
/* ============================================================= */
.ds-tabs {
  font-family: var(--font-sans);
}

.ds-tabs__list {
  display: flex;
  gap: 0;
  position: relative;
}

.ds-tabs__list--underline {
  border-bottom: 1px solid var(--color-border-subtle);
}

.ds-tabs__list--segmented {
  background: var(--color-bg-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-2);
  gap: var(--space-2);
}

.ds-tabs__tab {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-8) var(--space-16);
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: var(--type-label-md-size);
  line-height: var(--type-label-md-lh);
  font-weight: var(--type-label-md-weight);
  color: var(--color-text-secondary);
  transition: color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
  position: relative;
  white-space: nowrap;
}

.ds-tabs__tab:hover {
  color: var(--color-text-primary);
}

.ds-tabs__tab:focus-visible {
  outline: none;
  box-shadow: var(--effect-shadow-focus);
  z-index: 1;
}

/* Underline variant — selected */
.ds-tabs__list--underline .ds-tabs__tab[aria-selected="true"] {
  color: var(--color-text-accent);
}
.ds-tabs__list--underline .ds-tabs__tab[aria-selected="true"]::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--color-accent-default);
  border-radius: var(--radius-pill);
}

/* Segmented variant — selected */
.ds-tabs__list--segmented .ds-tabs__tab {
  border-radius: var(--radius-sm);
}
.ds-tabs__list--segmented .ds-tabs__tab[aria-selected="true"] {
  background: var(--color-bg-surface-solid);
  color: var(--color-text-primary);
  box-shadow: var(--effect-shadow-xs);
}

.ds-tabs__tab-icon {
  width: var(--size-icon-sm);
  height: var(--size-icon-sm);
  display: inline-flex;
}

.ds-tabs__panel {
  padding-top: var(--space-16);
}

/* ============================================================= */
/* O3 — DropdownMenu                                              */
/* ============================================================= */
.ds-dropdown {
  position: relative;
  display: inline-flex;
  font-family: var(--font-sans);
}

.ds-dropdown__popover {
  position: absolute;
  top: 100%;
  margin-top: var(--space-4);
  min-width: 180px;
  background: var(--color-bg-surface-solid);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--effect-shadow-md);
  padding: var(--space-4);
  z-index: 1000;
  animation: ds-dropdown-enter 0.12s ease;
}

.ds-dropdown__popover--start { left: 0; }
.ds-dropdown__popover--end   { right: 0; }

@keyframes ds-dropdown-enter {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.ds-dropdown__item {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  width: 100%;
  padding: var(--space-8) var(--space-12);
  border: none;
  background: transparent;
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: var(--type-body-md-size);
  line-height: var(--type-body-md-lh);
  color: var(--color-text-primary);
  cursor: pointer;
  white-space: nowrap;
  text-align: left;
  transition: background-color 0.1s ease;
}

.ds-dropdown__item:hover,
.ds-dropdown__item:focus {
  background: var(--color-bg-hover);
  outline: none;
}
.ds-dropdown__item:focus-visible {
  box-shadow: var(--effect-shadow-focus);
}

.ds-dropdown__item--danger {
  color: var(--color-text-danger);
}

.ds-dropdown__item--disabled {
  color: var(--color-text-disabled);
  cursor: not-allowed;
}
.ds-dropdown__item--disabled:hover,
.ds-dropdown__item--disabled:focus {
  background: transparent;
}

.ds-dropdown__item-icon {
  width: var(--size-icon-sm);
  height: var(--size-icon-sm);
  flex: none;
}

.ds-dropdown__separator {
  height: 1px;
  background: var(--color-border-subtle);
  margin: var(--space-4) 0;
}

/* ============================================================= */
/* O4 — DataTable                                                  */
/* ============================================================= */
.ds-table-root {
  font-family: var(--font-sans);
  width: 100%;
}

.ds-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--type-body-md-size);
  line-height: var(--type-body-md-lh);
}

.ds-table th {
  text-align: left;
  padding: var(--space-8) var(--space-12);
  font-size: var(--type-label-md-size);
  line-height: var(--type-label-md-lh);
  font-weight: var(--type-label-md-weight);
  color: var(--color-text-secondary);
  border-bottom: 1px solid var(--color-border-default);
  background: var(--color-bg-subtle);
}

.ds-table th[align="center"] { text-align: center; }
.ds-table th[align="right"]  { text-align: right; }

.ds-table td {
  padding: var(--space-8) var(--space-12);
  color: var(--color-text-primary);
  border-bottom: 1px solid var(--color-border-subtle);
}

.ds-table td[align="center"] { text-align: center; }
.ds-table td[align="right"]  { text-align: right; }

.ds-table__sort-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  background: transparent;
  border: none;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.ds-table__sort-btn:focus-visible {
  outline: none;
  box-shadow: var(--effect-shadow-focus);
  border-radius: var(--radius-xs);
}

.ds-table__sort-icon {
  width: var(--size-icon-xs);
  height: var(--size-icon-xs);
  color: var(--color-text-tertiary);
}

.ds-table__row--selected {
  background: var(--color-bg-selected);
}

.ds-table__checkbox {
  width: var(--size-icon-sm);
  height: var(--size-icon-sm);
  cursor: pointer;
  accent-color: var(--color-accent-default);
}
.ds-table__checkbox:focus-visible {
  outline: none;
  box-shadow: var(--effect-shadow-focus);
}

.ds-table__empty {
  padding: var(--space-48) var(--space-16);
  text-align: center;
  color: var(--color-text-tertiary);
  font-size: var(--type-body-lg-size);
  line-height: var(--type-body-lg-lh);
}

.ds-table__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-12) 0;
  font-size: var(--type-body-sm-size);
  line-height: var(--type-body-sm-lh);
  color: var(--color-text-secondary);
}

.ds-table__pagination {
  display: flex;
  gap: var(--space-4);
}

.ds-table__page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--size-control-sm);
  height: var(--size-control-sm);
  padding-inline: var(--space-8);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  background: var(--color-bg-surface-solid);
  font-family: var(--font-sans);
  font-size: var(--type-body-sm-size);
  color: var(--color-text-primary);
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.ds-table__page-btn:hover {
  background: var(--color-bg-hover);
}
.ds-table__page-btn:focus-visible {
  outline: none;
  box-shadow: var(--effect-shadow-focus);
}
.ds-table__page-btn[aria-current="page"] {
  background: var(--color-bg-selected);
  color: var(--color-text-accent);
  border-color: var(--color-border-accent);
}
.ds-table__page-btn:disabled {
  color: var(--color-text-disabled);
  cursor: not-allowed;
  background: var(--color-bg-disabled);
}

/* ============================================================= */
/* O5 — AppShell                                                   */
/* ============================================================= */
.ds-app-shell {
  display: grid;
  grid-template-columns: var(--size-sidebar-w) 1fr;
  min-height: 100vh;
  font-family: var(--font-sans);
}

.ds-app-shell--collapsed {
  grid-template-columns: 64px 1fr;
}

.ds-app-shell__sidebar {
  display: flex;
  flex-direction: column;
  background: var(--color-bg-surface-solid);
  border-right: 1px solid var(--color-border-subtle);
  padding: var(--space-16);
  gap: var(--space-4);
  overflow-y: auto;
}

.ds-app-shell__brand {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  padding: var(--space-8);
  margin-bottom: var(--space-16);
  font-size: var(--type-h3-size);
  line-height: var(--type-h3-lh);
  font-weight: var(--type-h3-weight);
  color: var(--color-text-primary);
}

.ds-app-shell__nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  padding: var(--space-8) var(--space-12);
  border: none;
  background: transparent;
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: var(--type-body-md-size);
  line-height: var(--type-body-md-lh);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
  text-align: left;
  white-space: nowrap;
}

.ds-app-shell__nav-item:hover {
  background: var(--color-bg-hover);
  color: var(--color-text-primary);
}

.ds-app-shell__nav-item:focus-visible {
  outline: none;
  box-shadow: var(--effect-shadow-focus);
}

.ds-app-shell__nav-item[aria-current="page"] {
  background: var(--color-bg-selected);
  color: var(--color-text-accent);
}

.ds-app-shell__nav-icon {
  width: var(--size-icon-md);
  height: var(--size-icon-md);
  flex: none;
}

.ds-app-shell--collapsed .ds-app-shell__nav-label,
.ds-app-shell--collapsed .ds-app-shell__brand-text {
  display: none;
}

.ds-app-shell--collapsed .ds-app-shell__nav-item {
  justify-content: center;
  padding: var(--space-8);
}

.ds-app-shell--collapsed .ds-app-shell__brand {
  justify-content: center;
}

.ds-app-shell__main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.ds-app-shell__topbar {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  padding: var(--space-12) var(--space-24);
  background: var(--color-bg-surface);
  backdrop-filter: blur(var(--effect-blur-surface));
  -webkit-backdrop-filter: blur(var(--effect-blur-surface));
  border-bottom: 1px solid var(--color-border-subtle);
  position: sticky;
  top: 0;
  z-index: 100;
}

.ds-app-shell__topbar-left {
  display: flex;
  align-items: center;
  gap: var(--space-12);
}

.ds-app-shell__topbar-search {
  flex: 1;
  max-width: 400px;
}

.ds-app-shell__topbar-right {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  margin-left: auto;
}

.ds-app-shell__content {
  flex: 1;
  padding: var(--space-24);
}

/* Responsive: collapse sidebar on narrow screens */
@media (max-width: 768px) {
  .ds-app-shell {
    grid-template-columns: 1fr;
  }
  .ds-app-shell__sidebar {
    display: none;
  }
}