/* ============================================================
   StartBy design tokens. Warm paper + ink, one lavender accent, flat
   surfaces with hairline borders. No gradients, glows or glass.
   ============================================================ */

:root {
  --font-sans: 'Instrument Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --font-heading: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace;

  /* Surfaces */
  --color-bg: #f8f6fd;
  --color-surface: #ffffff;
  --color-surface-subtle: #f4f1fb;
  --color-surface-hover: #ede9f8;
  --color-surface-active: #e2ddf3;
  --color-surface-elevated: #ffffff;
  --color-surface-glass: #ffffff;

  --grid-line-color: transparent;
  --grid-size: 24px;

  /* Borders */
  --color-border: #1a1730;
  --color-border-subtle: #ddd8ee;
  --color-border-hover: #1a1730;
  --color-border-focus: #6552c9;

  /* Text */
  --color-text: #1a1730;
  --color-text-secondary: #423e5b;
  --color-text-muted: #6a6682;
  --color-text-faint: #9a95b2;

  /* Accent: lavender */
  --accent-rgb: 101, 82, 201;
  --success-rgb: 63, 125, 78;
  --color-primary: #6552c9;
  --color-primary-fg: #6552c9;
  --color-primary-hover: #4f3fb0;
  --color-primary-text: #ffffff;
  --color-primary-subtle: rgba(101, 82, 201, 0.09);
  --color-primary-glow: transparent;
  --color-cyan: #2f5d8a;
  --color-purple: #8b6fd6;
  --gradient-primary: var(--color-primary);
  --gradient-heliix: var(--color-primary);
  --gradient-hero: var(--color-text);

  /* Status */
  --color-success: #3f7d4e;
  --color-success-subtle: #e6efe3;
  --color-success-text: #2e6140;

  --color-warning: #a14fb8;
  --warning-rgb: 161, 79, 184;
  --color-warning-subtle: #f1e4f5;
  --color-warning-text: #7a2f93;

  --color-danger: #c2570c;
  --danger-rgb: 194, 87, 12;
  --color-danger-subtle: #fbebdd;
  --color-danger-text: #9a4308;

  --color-info: #2f5d8a;
  --color-info-subtle: #e0e8f0;
  --color-info-text: #24476a;

  /* Tags */
  --color-tag-work: #2f5d8a;
  --color-tag-work-bg: #e0e8f0;
  --color-tag-study: #6552c9;
  --color-tag-study-bg: #e8e4f8;
  --color-tag-personal: #2a7f86;
  --color-tag-personal-bg: #d9eef0;

  --color-badge-pending: #a14fb8;
  --color-badge-done: #3f7d4e;
  --color-badge-overdue: #c2570c;

  /* Flat depth: hairlines, with real shadow only for floating layers */
  --shadow-sketch: none;
  --shadow-sketch-lg: none;
  --shadow-xs: none;
  --shadow-sm: 0 1px 0 rgba(28, 24, 16, 0.06);
  --shadow-md: 0 1px 0 rgba(28, 24, 16, 0.08);
  --shadow-lg: 0 10px 28px -14px rgba(28, 24, 16, 0.35);
  --shadow-xl: 0 18px 44px -18px rgba(28, 24, 16, 0.4);
  --shadow-glow: none;

  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-full: 9999px;

  --transition-fast: 120ms ease;
  --transition-normal: 180ms ease;
}

[data-theme="dark"] {
  --color-bg: #0f0e17;
  --color-surface: #17151f;
  --color-surface-subtle: #1c1a27;
  --color-surface-hover: #27243a;
  --color-surface-active: #342f48;
  --color-surface-elevated: #1d1b2a;
  --color-surface-glass: #17151f;

  --grid-line-color: transparent;

  --color-border: rgba(238, 235, 248, 0.2);
  --color-border-subtle: rgba(238, 235, 248, 0.11);
  --color-border-hover: rgba(238, 235, 248, 0.35);
  --color-border-focus: #b8a9f2;

  --color-text: #eeebf8;
  --color-text-secondary: #cac5df;
  --color-text-muted: #9d98b4;
  --color-text-faint: #757090;

  --accent-rgb: 184, 169, 242;
  --success-rgb: 127, 192, 143;
  --color-primary: #b8a9f2;
  --color-primary-fg: #b8a9f2;
  --color-primary-hover: #cfc4f7;
  --color-primary-text: #14121f;
  --color-primary-subtle: rgba(184, 169, 242, 0.13);
  --color-cyan: #8db4dc;
  --color-purple: #d4c8f8;
  --gradient-hero: var(--color-surface-subtle);

  --color-success: #7fc08f;
  --color-success-subtle: rgba(127, 192, 143, 0.14);
  --color-success-text: #a3d7b0;
  --color-warning: #d9a0ec;
  --warning-rgb: 217, 160, 236;
  --color-warning-subtle: rgba(217, 160, 236, 0.14);
  --color-warning-text: #e8c0f4;
  --color-danger: #f0985a;
  --danger-rgb: 240, 152, 90;
  --color-danger-subtle: rgba(240, 152, 90, 0.14);
  --color-danger-text: #f6b68a;
  --color-info: #8db4dc;
  --color-info-subtle: rgba(141, 180, 220, 0.14);
  --color-info-text: #b4cde8;

  --color-tag-work: #8db4dc;
  --color-tag-work-bg: rgba(141, 180, 220, 0.14);
  --color-tag-study: #b8a9f2;
  --color-tag-study-bg: rgba(184, 169, 242, 0.14);
  --color-tag-personal: #7cc7cc;
  --color-tag-personal-bg: rgba(124, 199, 204, 0.14);

  --color-badge-pending: #d9a0ec;
  --color-badge-done: #7fc08f;
  --color-badge-overdue: #f0985a;

  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: 0 10px 28px -14px rgba(0, 0, 0, 0.7);
  --shadow-xl: 0 18px 44px -18px rgba(0, 0, 0, 0.8);
}

/* ============================================================
   Universal Precision Theme Switch Button
   ============================================================ */
.theme-switch-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  padding: 0.42rem 0.85rem;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}

.theme-switch-btn:hover {
  background: var(--color-surface-hover);
  color: var(--color-text);
  border-color: var(--color-border-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.14);
}

.theme-switch-btn:active {
  transform: translateY(0);
  box-shadow: none;
}

.theme-switch-btn .theme-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

[data-theme="dark"] .theme-switch-btn {
  background: #121624;
  border-color: rgba(255, 255, 255, 0.14);
  color: #f1f5f9;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}

[data-theme="dark"] .theme-switch-btn:hover {
  background: #181e30;
  border-color: rgba(99, 102, 241, 0.45);
  box-shadow: 0 0 14px rgba(99, 102, 241, 0.25);
}