/* ============================================================
   Quooter — base.css
   Design tokens + resets shared across every screen of the app.
   Look & feel: a trade quote pad / docket, not a generic SaaS login.
   ============================================================ */

:root {
  /*
   * Colour tokens (--colour-paper, --colour-ink, --colour-signal, etc.) are
   * deliberately NOT defined here. Each theme defines the full set —
   * see assets/css/themes/default.css and assets/css/themes/dark.css.
   * This file only holds things that stay the same across every theme:
   * type, spacing, radius. To add a new theme, copy one of the files in
   * themes/ and change the values — nothing in this file needs to change.
   */

  /* --- Type --- */
  --font-display: 'Oswald', 'Arial Narrow', sans-serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', 'Courier New', monospace;

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

  --radius-sm: 3px;
  --radius-md: 6px;

  /* --focus-ring is themed too (it's tinted with the accent colour) —
     defined in each file under themes/, not here. */
}

/* --- Reset --- */

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

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--colour-paper);
  color: var(--colour-ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.01em;
  margin: 0;
}

p {
  margin: 0;
}

a {
  color: inherit;
}

button,
input {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

/* Visible keyboard focus everywhere in the app — never remove this. */
a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}

/* --- Buttons ---
   Base .btn/.btn--primary live here (not login.css) because every
   screen loads base.css, but only the login screen loads login.css —
   modules under app-shell.css (Catalogue, Quotes, ...) need these
   classes too. login.css keeps only what's genuinely login-specific
   (.btn--google). Module CSS files add their own .btn--secondary /
   .btn--small variants locally, same as Catalogue already does. */

.btn {
  width: 100%;
  border: none;
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background-color 0.15s ease, opacity 0.15s ease;
}

.btn--primary {
  background-color: var(--colour-signal);
  color: var(--colour-paper-raised);
}

.btn--primary:hover {
  background-color: var(--colour-signal-dark);
}

.btn--primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* --- Language / theme control strip (used on the login screen) --- */

.page-controls {
  position: fixed;
  top: var(--space-4);
  right: var(--space-4);
  display: flex;
  gap: var(--space-2);
  z-index: 10;
}

.page-controls__select,
.page-controls__button {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background-color: var(--colour-paper-raised);
  color: var(--colour-steel);
  border: 1px solid var(--colour-line);
  border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-2);
  cursor: pointer;
}

/* Respect users who've asked for reduced motion at the OS level. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}