/* ═══════════════════════════════════════════════════════════
   LOXTU Design Tokens — ported from www.loxtu.com
   Default product theme: dark. Self-hosted fonts.
   Hot-reload: edit → save → hard refresh.
   ═══════════════════════════════════════════════════════════ */

@font-face {
  font-family: "Inter";
  src: url("/static/fonts/Inter-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("/static/fonts/SpaceGrotesk-Variable.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/static/fonts/JetBrainsMono-Variable.woff2") format("woff2");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
  font-feature-settings: "zero" 1;
}

/* Landing dark is product default (loxtu.com [data-theme=dark]) */
:root,
[data-theme="dark"] {
  color-scheme: dark;

  --bg-body: #0a0a0a;
  --bg-paper: #121212;
  --text-primary: #f1f5f9;
  --text-secondary: #94a3b8;
  --text-light: #64748b;
  --accent: #38bdf8;
  --accent-dark: #bae6fd;
  --accent-light: #082f49;
  --ink: #f8fafc;
  --border: #334155;
  --header-bg: transparent;

  --radius-md: 6px;
  --radius-lg: 12px;
  --radius-xl: 1rem;
  --radius-2xl: 1.25rem;

  --font-main: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Space Grotesk", var(--font-main);
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace;

  --container-width: 1024px;
  --header-height: 64px;
  --header-pad-x: 40px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-landing: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-normal: 300ms;
  --duration-slow: 500ms;

  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent);
  --auth-card-max: 26.25rem;

  /* aliases used by components */
  --color-bg: var(--bg-body);
  --color-surface: var(--bg-paper);
  --color-text: var(--text-primary);
  --color-text-secondary: var(--text-secondary);
  --color-text-tertiary: var(--text-light);
  --color-text-on-primary: #0a0a0a;
  --color-border: color-mix(in srgb, var(--border) 70%, transparent);
  --color-border-strong: var(--border);
  --color-primary: var(--accent);
  --color-primary-hover: var(--accent-dark);
  --color-primary-subtle: color-mix(in srgb, var(--accent) 16%, transparent);
  --color-danger: #ef4444;
  --color-success: #10b981;
  --glass-bg: color-mix(in srgb, var(--bg-paper) 72%, transparent);
  --glass-border: color-mix(in srgb, var(--border) 55%, transparent);
  --glass-blur: 20px;
}

/* Landing light (loxtu.com [data-theme=light] / :root on marketing site) */
[data-theme="light"] {
  color-scheme: light;

  --bg-body: #fdfdfd;
  --bg-paper: #ffffff;
  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-light: #94a3b8;
  --accent: #0284c7;
  --accent-dark: #0c4a6e;
  --accent-light: #f0f9ff;
  --ink: #1e293b;
  --border: #e2e8f0;
  --header-bg: transparent;

  --color-text-on-primary: #ffffff;
  --color-danger: #ef4444;
  --color-success: #10b981;
  --glass-bg: color-mix(in srgb, #ffffff 78%, transparent);
  --glass-border: color-mix(in srgb, var(--border) 80%, transparent);
  --color-primary-subtle: color-mix(in srgb, var(--accent) 12%, transparent);
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}

@media (max-width: 640px) {
  :root {
    --header-pad-x: 24px;
    --auth-card-max: min(26.25rem, calc(100vw - 2rem));
  }
}