/* Layout only; colors/spacing from design-system tokens (imported via shell main). */
.loginPage {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  padding-top: calc(var(--space-4) + var(--safe-area-inset-top));
  padding-bottom: calc(var(--space-4) + var(--safe-area-inset-bottom));
  padding-left: calc(var(--space-4) + var(--safe-area-inset-left));
  padding-right: calc(var(--space-4) + var(--safe-area-inset-right));
  background: hsl(var(--muted) / 0.35);
}

.loginPage__inner {
  width: 100%;
  max-width: var(--modal-max-w-md);
}

.loginPage__title {
  margin-bottom: var(--space-4);
}

.loginPage__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.loginPage__loading {
  color: hsl(var(--muted-foreground));
}
/**
 * @alicia/design-system — Design tokens (CSS variables)
 * Single source of truth for colors, spacing, radius, typography.
 * Consumers (e.g. packages/ui, apps) must use these tokens only.
 */

:root {
  /* Colors — primary palette */
  --primary: 220 90% 56%;
  --primary-foreground: 0 0% 100%;
  --secondary: 220 14% 96%;
  --secondary-foreground: 220 9% 46%;

  /* Background & foreground */
  --background: 0 0% 100%;
  --foreground: 220 9% 15%;

  /* Muted */
  --muted: 220 14% 96%;
  --muted-foreground: 220 9% 46%;

  /* Semantic */
  --success: 142 76% 36%;
  --warning: 38 92% 50%;
  --error: 0 84% 60%;
  --info: 199 89% 48%;

  /* Borders & input */
  --border: 220 13% 91%;
  --input: 220 13% 91%;
  --ring: 220 90% 56%;

  /* Radius */
  --radius: 0.5rem;
  --radius-sm: 0.25rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;

  /* Modal / overlay */
  --modal-max-w-sm: 24rem;
  --modal-max-w-md: 28rem;
  --modal-max-w-lg: 32rem;
  --modal-max-w-xl: 36rem;

  /* Spacing (optional tokens for consistency) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;

  /* Safe area (notched devices) */
  --safe-area-inset-top: env(safe-area-inset-top, 0px);
  --safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);
  --safe-area-inset-left: env(safe-area-inset-left, 0px);
  --safe-area-inset-right: env(safe-area-inset-right, 0px);
}

/* Optional: dark theme (can be toggled via class on html) */
[data-theme="dark"],
.dark {
  --background: 220 14% 8%;
  --foreground: 220 10% 98%;
  --muted: 220 14% 14%;
  --muted-foreground: 220 9% 65%;
  --border: 220 13% 18%;
  --input: 220 13% 18%;
}
:root{--primary: 220 90% 56%;--primary-foreground: 0 0% 100%;--secondary: 220 14% 96%;--secondary-foreground: 220 9% 46%;--background: 0 0% 100%;--foreground: 220 9% 15%;--muted: 220 14% 96%;--muted-foreground: 220 9% 46%;--success: 142 76% 36%;--warning: 38 92% 50%;--error: 0 84% 60%;--info: 199 89% 48%;--border: 220 13% 91%;--input: 220 13% 91%;--ring: 220 90% 56%;--radius: .5rem;--radius-sm: .25rem;--radius-lg: .75rem;--radius-xl: 1rem;--modal-max-w-sm: 24rem;--modal-max-w-md: 28rem;--modal-max-w-lg: 32rem;--modal-max-w-xl: 36rem;--space-1: .25rem;--space-2: .5rem;--space-3: .75rem;--space-4: 1rem;--space-5: 1.25rem;--space-6: 1.5rem;--space-8: 2rem;--space-10: 2.5rem;--space-12: 3rem;--safe-area-inset-top: env(safe-area-inset-top, 0px);--safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);--safe-area-inset-left: env(safe-area-inset-left, 0px);--safe-area-inset-right: env(safe-area-inset-right, 0px)}[data-theme=dark],.dark{--background: 220 14% 8%;--foreground: 220 10% 98%;--muted: 220 14% 14%;--muted-foreground: 220 9% 65%;--border: 220 13% 18%;--input: 220 13% 18%}.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding:var(--space-2) var(--space-4);border-radius:var(--radius);font-weight:500;border:1px solid transparent;cursor:pointer;transition:background .15s,color .15s}.btn-primary{background:hsl(var(--primary));color:hsl(var(--primary-foreground))}.btn-primary:hover{filter:brightness(1.05)}.btn-secondary{background:hsl(var(--secondary));color:hsl(var(--secondary-foreground))}.btn-secondary:hover{filter:brightness(.98)}.card{background:hsl(var(--background));border:1px solid hsl(var(--border));border-radius:var(--radius-lg);padding:var(--space-4);box-shadow:0 1px 3px #00000014}.input{width:100%;min-height:44px;padding:var(--space-2) var(--space-3);border:1px solid hsl(var(--input));border-radius:var(--radius);background:hsl(var(--background));color:hsl(var(--foreground));font-size:1rem}.input:focus{outline:none;border-color:hsl(var(--ring));box-shadow:0 0 0 2px hsl(var(--ring) / .2)}.alert{padding:var(--space-4);border-radius:var(--radius);border:1px solid}.alert-error{background:hsl(var(--error) / .1);border-color:hsl(var(--error));color:hsl(var(--error))}.alert-success{background:hsl(var(--success) / .1);border-color:hsl(var(--success));color:hsl(var(--success))}.alert-warning{background:hsl(var(--warning) / .1);border-color:hsl(var(--warning));color:hsl(var(--warning))}.badge{display:inline-flex;align-items:center;padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm);font-size:.875rem;font-weight:500}.badge-success{background:hsl(var(--success) / .15);color:hsl(var(--success))}.badge-warning{background:hsl(var(--warning) / .15);color:hsl(var(--warning))}.badge-error{background:hsl(var(--error) / .15);color:hsl(var(--error))}.badge-info{background:hsl(var(--info) / .15);color:hsl(var(--info))}.heading-1{font-size:1.875rem;font-weight:700;color:hsl(var(--foreground))}.heading-2{font-size:1.5rem;font-weight:600;color:hsl(var(--foreground))}.container-app{width:100%;max-width:1280px;margin-left:auto;margin-right:auto;padding-left:var(--space-4);padding-right:var(--space-4)}