/*
  Shared design tokens for DA.MOTORS internal tools.
  Values are extracted from the existing calculator UI (static/style.css),
  not invented anew, so the login page and the calculator already agree
  on the same palette/radii/type scale. When the calculator is redesigned
  later, its hardcoded hex values can be swapped for these variables
  without changing what anything looks like.
*/

*, *::before, *::after {
  box-sizing: border-box;
}

:root {
  /* Surfaces */
  --color-bg: #0f1117;
  --color-bg-deep: #0b0d12;
  --color-surface: #1a1d28;
  --color-surface-raised: #212436;
  --color-surface-sunken: #131620;
  --color-border: #2a2d3e;
  --color-border-strong: #374151;

  /* Text */
  --color-text: #e8eaf0;
  --color-text-muted: #8892a4;
  --color-text-dim: #6b7280;
  --color-text-faint: #4b5563;

  /* Accent (blue) */
  --color-accent: #2563eb;
  --color-accent-hover: #1d4ed8;
  --color-accent-soft: #60a5fa;

  /* Semantic — success only for positive states, danger only for errors */
  --color-success: #059669;
  --color-success-text: #6ee7b7;
  --color-success-bg: #064e3b;
  --color-success-border: #065f46;
  --color-danger-text: #f87171;
  --color-danger-bg: #2d1010;
  --color-danger-border: #7f1d1d;
  --color-warning-text: #fbbf24;

  /* Radii */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 22px;

  /* Typography */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Code", Consolas, monospace;
  --fs-xs: 11px;
  --fs-sm: 12px;
  --fs-base: 14px;
  --fs-md: 15px;
  --fs-lg: 20px;
  --fs-xl: 28px;
  --fs-2xl: 38px;

  /* Motion */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  /* Strong ease-out for entrances/reveals — has real punch, unlike the
     built-in CSS eases. Default for anything appearing on screen. */
  --ease-out-strong: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 150ms;
  --dur-base: 250ms;

  /* Shadows */
  --shadow-card: 0 10px 40px rgba(0, 0, 0, 0.4);
  --shadow-focus: 0 0 0 3px rgba(37, 99, 235, 0.35);
}

/* Shared button component — reused as-is once the calculator adopts theme.css */
.btn {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: 600;
  border-radius: var(--radius-lg);
  border: 1px solid transparent;
  padding: 12px 20px;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-standard),
    border-color var(--dur-fast) var(--ease-standard),
    transform var(--dur-fast) var(--ease-standard);
}

.btn-primary {
  background: var(--color-accent);
  color: #fff;
}

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

.btn-primary:active {
  transform: translateY(1px);
}

.btn:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}