/* ============================================================
   Tool Wizard - Design tokens (light theme)
   Source: design-system.md §2 Color, §3 Typography, §4 Spacing,
   §5 Radius & elevation, §8 Micro-animations.
   Dark theme overrides live in app-dark.css under [data-theme="dark"].
   ============================================================ */

:root {
  /* §2 Color palette (light) */
  --surface-0: #f5f6fa;      /* app background */
  --surface-1: #ffffff;      /* appbar, drawer, cards, panes */
  --surface-2: #eef0f6;      /* search fields, code output bg, hover */
  --surface-3: #e5e8f0;      /* raised/hover, skeleton */
  --text-1: #16181d;         /* primary text */
  --text-2: #565d68;         /* secondary text */
  --text-3: #8b93a0;         /* muted/kicker/labels */
  --accent: #5b4bf0;         /* primary action, selected nav, focus */
  --accent-hover: #4a3cd8;   /* primary hover */
  --accent-contrast: #ffffff;/* text on accent */
  --accent-surface: #eeebfe; /* selected nav bg, tile glyphs */
  --success: #1f9d55;
  --success-surface: #e6f5ec;
  --warning: #b7791f;
  --warning-surface: #faf1e1;
  --danger: #d64545;
  --danger-surface: #fbeaea;
  --info: #2f6fed;
  --info-surface: #e8effd;
  --focus: #5b4bf0;
  --border: #dde1ea;
  --border-strong: #c6ccd8;

  /* §3 Typography scale */
  --font-xs: 12px;
  --font-sm: 14px;
  --font-md: 16px;
  --font-lg: 20px;
  --font-xl: 26px;

  /* §4 Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  /* §4 Layout */
  --appbar-height: 60px;
  --drawer-width: 288px;
  --content-max-width: 1080px;

  /* §5 Radius */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;

  /* §5 Elevation */
  --shadow-1: 0 1px 2px rgba(16, 18, 24, 0.08);
  --shadow-2: 0 4px 12px rgba(16, 18, 24, 0.12);
  --shadow-3: 0 12px 32px rgba(16, 18, 24, 0.18);

  /* §8 Motion */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-fast: 150ms;
  --dur-base: 200ms;
  --dur-drawer: 250ms;

  /* Font stacks */
  --font-sans: -apple-system, "Segoe UI", Roboto, Inter, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "SF Mono", "JetBrains Mono", "Fira Code", ui-monospace, Menlo, Consolas, monospace;
}

/* Route headings receive programmatic focus for screen-reader navigation, not
   keyboard interaction. Keep that focus without the browser's default border;
   links, buttons and inputs retain their visible keyboard-focus indicators. */
.tw-main :is(h1, h2, h3)[tabindex="-1"]:focus {
  outline: none;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--font-md);
  line-height: 1.5;
  background: var(--surface-0);
  color: var(--text-1);
}

/* Native anchors share the theme too, including guide/privacy prose. Keep the
   default specificity low so cards, buttons and navigation retain their layout. */
:where(a[href]) {
  color: var(--accent);
  text-decoration-line: underline;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.2em;
  text-decoration-skip-ink: auto;
}
:where(a[href]):hover { color: var(--accent-hover); }
:where(a[href]):focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Reduced motion: collapse all non-essential animation */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* App shell */
.tw-app { display: flex; flex-direction: column; height: 100vh; height: 100dvh; overflow: hidden; }

.tw-appbar {
  display: flex; align-items: center; gap: var(--space-3);
  height: var(--appbar-height); padding: 0 var(--space-4);
  background: var(--surface-1); border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 10;
}

.tw-brand { display: flex; align-items: center; gap: var(--space-2); }
.tw-logo { width: 40px; height: 40px; object-fit: contain; }
.tw-title { font-size: var(--font-md); font-weight: 600; letter-spacing: -0.01em; }

.tw-actions { margin-left: auto; display: flex; align-items: center; gap: var(--space-2); }

.tw-drawer {
  width: var(--drawer-width); flex-shrink: 0;
  background: var(--surface-1); border-right: 1px solid var(--border);
  padding: var(--space-3); overflow-y: auto;
  display: flex; flex-direction: column; min-height: 0;
}
.tw-drawer-search { margin-bottom: var(--space-3); }

/* Sidebar (TwLayout) - same visual as .tw-drawer but with its own open/close state
   so it can slide off-canvas on mobile without colliding with the TwDrawer component. */
.tw-sidebar {
  width: var(--drawer-width); flex-shrink: 0;
  background: var(--surface-1); border-right: 1px solid var(--border);
  padding: var(--space-3); overflow-y: auto;
  display: flex; flex-direction: column; min-height: 0;
}
.tw-sidebar-closed { display: none; }
.tw-sidebar-scrim {
  display: none;
  position: absolute; inset: 0; z-index: 20;
  background: rgba(16, 18, 24, 0.4);
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-drawer) var(--ease);
}
.tw-sidebar-scrim-open { opacity: 1; pointer-events: auto; }

.tw-main {
  flex: 1; min-width: 0; min-height: 0; overflow-y: auto;
  padding: var(--space-5);
}

.tw-fab {
  position: fixed; right: 20px; bottom: 20px;
  width: 48px; height: 48px; border-radius: var(--radius-lg);
  background: var(--accent); color: var(--accent-contrast);
  border: none; cursor: pointer; box-shadow: var(--shadow-2);
  display: flex; align-items: center; justify-content: center;
}

/* FAB color variants - Color controls the background, icon inherits a
   contrasting currentColor (mirrors the .tw-btn-filled variants). */
.tw-fab.tw-color-primary { background: var(--accent); color: var(--accent-contrast); }
.tw-fab.tw-color-primary:hover { background: var(--accent-hover); }
.tw-fab.tw-color-secondary { background: var(--surface-3); color: var(--text-1); }
.tw-fab.tw-color-secondary:hover { background: var(--surface-2); }
.tw-fab.tw-color-tertiary { background: var(--surface-2); color: var(--text-1); }
.tw-fab.tw-color-error { background: var(--danger); color: #fff; }
.tw-fab.tw-color-success { background: var(--success); color: #fff; }
.tw-fab.tw-color-warning { background: var(--warning); color: #fff; }

/* Buttons */
.tw-btn {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  border: none; cursor: pointer;
  background: var(--accent); color: var(--accent-contrast);
  font-family: var(--font-sans); font-size: var(--font-sm); font-weight: 500;
  transition: background var(--dur-fast) var(--ease);
}
.tw-btn:hover { background: var(--accent-hover); }
.tw-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.tw-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Icon-only button */
.tw-icon-btn {
  width: 40px; height: 40px; display: inline-flex;
  align-items: center; justify-content: center;
  border: none; background: transparent; color: var(--text-1);
  border-radius: var(--radius-sm); cursor: pointer;
}
.tw-icon-btn:hover { background: var(--surface-2); }
.tw-icon-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Theme toggle */
.tw-theme-toggle {
  width: 40px; height: 40px; border: none; background: transparent;
  color: var(--text-1); border-radius: var(--radius-sm); cursor: pointer;
  font-size: var(--font-md);
}
.tw-theme-toggle:hover { background: var(--surface-2); }

/* Icons */
.tw-icon { width: 16px; height: 16px; display: inline-block; }

/* Responsive: off-canvas sidebar under 860px */
@media (max-width: 860px) {
  .tw-title { display: none; }

  .tw-sidebar {
    display: flex !important;      /* keep rendered so the slide animates */
    position: absolute; top: 0; left: 0; bottom: 0;
    box-sizing: border-box;
    z-index: 30; max-width: 80%;
    box-shadow: var(--shadow-3);
    transform: translateX(-100%);
    transition: transform var(--dur-drawer) var(--ease);
  }
  .tw-sidebar:not(.tw-sidebar-closed) { transform: translateX(0); }
  .tw-sidebar-scrim { display: block; }
}