/* ==============================================================================
   WebSlideSwitch - Modern Minimal Design System
   Plus Jakarta Sans & Apple Native Typography (SF Pro, Smooth Antialiased)
   ============================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* Brand & Accent */
  --color-primary: #000000;
  --color-on-primary: #ffffff;
  --color-blue-hover: #1f1f1f;
  --color-blue-80: #0a0a0a;

  /* Neutrals & Surfaces */
  --color-canvas: #ffffff;
  --color-surface-1: #f5f5f7;
  --color-surface-2: #e8e8ed;
  --color-hairline: #e5e5ea;
  --color-hairline-strong: #1d1d1f;

  /* Typography / Ink */
  --color-ink: #1d1d1f;
  --color-ink-muted: #6e6e73;
  --color-ink-subtle: #86868b;

  /* Inverse (Charcoal) */
  --color-inverse-canvas: #1d1d1f;
  --color-inverse-surface-1: #2c2c2e;
  --color-inverse-ink: #ffffff;
  --color-inverse-ink-muted: #a1a1a6;

  /* Semantics */
  --color-semantic-success: #34c759;
  --color-semantic-warning: #ff9f0a;
  --color-semantic-error: #ff3b30;
  --color-semantic-info: #0071e3;

  /* Spacing Grid (4px base) */
  --spacing-xxs: 4px;
  --spacing-xs: 8px;
  --spacing-sm: 12px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-xxl: 48px;

  /* Corners */
  --rounded-none: 0px;

  /* Typography Settings (Apple / Modern OS Native ＋ Plus Jakarta Sans) */
  --font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Plus Jakarta Sans', 'Segoe UI', Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

body {
  background-color: var(--color-canvas);
  color: var(--color-ink);
  font-family: var(--font-family);
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: 0.16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ------------------------------------------------------------------------------
   Carbon Header Bar (48px fixed height)
   ------------------------------------------------------------------------------ */
.top-header {
  height: 48px;
  background-color: var(--color-canvas);
  border-bottom: 1px solid var(--color-hairline);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--spacing-md);
}

.brand-title {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  text-decoration: none;
  color: var(--color-ink);
}

.brand-text {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.16px;
  color: var(--color-ink);
}

.brand-subtext {
  font-size: 12px;
  color: var(--color-ink-muted);
  font-weight: 400;
  margin-left: 4px;
}

/* Status Indicator */
.badge-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--color-ink-muted);
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--color-ink-subtle);
  display: inline-block;
}

.status-dot.active {
  background-color: var(--color-semantic-success);
}

.status-dot.warning {
  background-color: var(--color-semantic-warning);
}

/* ------------------------------------------------------------------------------
   Buttons (Flat Square, 0px border radius, Carbon padding)
   ------------------------------------------------------------------------------ */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-primary);
  color: var(--color-on-primary);
  font-family: var(--font-family);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.16px;
  border: none;
  border-radius: var(--rounded-none);
  padding: 12px 16px;
  cursor: pointer;
  transition: background-color 0.1s ease;
  user-select: none;
  text-decoration: none;
}

.btn-primary:hover {
  background-color: var(--color-blue-hover);
}

.btn-primary:active {
  background-color: var(--color-blue-80);
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-ink);
  color: var(--color-inverse-ink);
  font-family: var(--font-family);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.16px;
  border: none;
  border-radius: var(--rounded-none);
  padding: 12px 16px;
  cursor: pointer;
  transition: background-color 0.1s ease;
  user-select: none;
}

.btn-secondary:hover {
  background-color: #333333;
}

.btn-tertiary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  color: var(--color-primary);
  font-family: var(--font-family);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.16px;
  border: 1px solid var(--color-primary);
  border-radius: var(--rounded-none);
  padding: 11px 15px;
  cursor: pointer;
  transition: all 0.1s ease;
  user-select: none;
}

.btn-tertiary:hover {
  background-color: var(--color-primary);
  color: var(--color-on-primary);
}

.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  color: var(--color-primary);
  font-family: var(--font-family);
  font-size: 12px;
  letter-spacing: 0.16px;
  border: none;
  padding: 8px 12px;
  cursor: pointer;
  text-decoration: none;
}

.btn-ghost:hover {
  background-color: var(--color-surface-1);
}

/* ------------------------------------------------------------------------------
   Cards & Tiles (Flat 1px Hairline, No Shadows)
   ------------------------------------------------------------------------------ */
.tile {
  background-color: var(--color-canvas);
  border: 1px solid var(--color-hairline);
  padding: var(--spacing-lg);
  border-radius: var(--rounded-none);
}

.tile-header {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.16px;
  color: var(--color-ink);
  margin-bottom: var(--spacing-sm);
  display: flex;
  justify-content: space-between;
  align-items: center;
}