@layer reset, tokens, base, layout, components, responsive;

/* Page de connexion de Synfusio en ligne : mêmes jetons que l'atelier, clair et sombre automatiques. */
@layer base {
  *, *::before, *::after { box-sizing: border-box; }
  body { margin: 0; min-height: 100dvh; display: grid; place-items: center; padding: var(--space-6); background: var(--bg); color: var(--ink); font-family: var(--font); }
}
@layer components {
  .login { width: min(400px, 100%); display: grid; gap: var(--space-4); }
  .login-mark { width: 56px; height: 56px; }
  .login-eyebrow { margin: var(--space-2) 0 0; font-size: var(--text-xs); font-weight: 600; letter-spacing: .12em; color: var(--accent-text); }
  .login h1 { margin: 0; font-size: var(--text-3xl); line-height: 1.05; letter-spacing: -.03em; }
  .login-form { display: grid; gap: var(--space-3); padding: var(--space-6); border: 1px solid var(--line); border-radius: var(--radius-xl); background: var(--surface); box-shadow: var(--shadow-sm); }
  .login-form label { font-size: var(--text-sm); font-weight: 600; }
  .login-form input { font: inherit; font-size: var(--text-md); padding: var(--space-3) var(--space-4); border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--bg); color: var(--ink); }
  .login-form input:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
  .login-form button { font: inherit; font-weight: 600; padding: var(--space-3) var(--space-4); border: 0; border-radius: var(--radius-pill); background: var(--accent); color: var(--accent-ink); cursor: pointer; }
  .login-form button:hover { background: var(--accent-hover); }
  .login-form button:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
  .login-form button:disabled { opacity: .6; cursor: wait; }
  .login-error { margin: 0; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); background: var(--danger-soft); color: var(--danger); font-size: var(--text-sm); }
  .login-note { margin: 0; font-size: var(--text-xs); color: var(--muted); }
}