/* ============================================================
   Tadano Tools Portal — design tokens + global styles
   Modern SaaS aesthetic (Linear / Stripe / Vercel-inspired)
   ============================================================ */

:root {
  /* Neutrals */
  --color-bg: #fafafa;
  --color-surface: #ffffff;
  --color-surface-2: #f5f5f7;
  --color-surface-hover: #f0f0f3;
  --color-border: #e4e4e7;
  --color-border-strong: #d4d4d8;
  --color-text: #18181b;
  --color-text-secondary: #52525b;
  --color-text-tertiary: #a1a1aa;

  /* Brand */
  --color-accent: #0a2540;
  --color-accent-hover: #15355e;
  --color-accent-fg: #ffffff;
  --color-link: #2563eb;
  --color-link-hover: #1d4ed8;
  --color-focus-ring: rgba(37, 99, 235, 0.35);

  /* Semantic */
  --color-success: #16a34a;
  --color-success-bg: #f0fdf4;
  --color-success-border: #bbf7d0;
  --color-warning: #d97706;
  --color-warning-bg: #fffbeb;
  --color-error: #dc2626;
  --color-error-bg: #fef2f2;
  --color-error-border: #fecaca;

  /* Typography */
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --text-xs: 11px;
  --text-sm: 13px;
  --text-base: 14px;
  --text-lg: 16px;
  --text-xl: 18px;
  --text-2xl: 22px;
  --text-3xl: 28px;

  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* Radii */
  --radius-sm: 4px;
  --radius: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 999px;

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.06), 0 2px 4px -2px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -4px rgba(15, 23, 42, 0.05);

  /* Motion */
  --transition: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast: 100ms ease;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.5;
  font-feature-settings: 'ss01', 'cv11';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Inputs and buttons inherit our font and color so Lit components
   automatically pick them up via the cascade into shadow DOM. */
input, select, textarea, button { font-family: inherit; color: inherit; }

a { color: var(--color-link); }
a:hover { color: var(--color-link-hover); }

::selection { background: rgba(37, 99, 235, 0.18); }