/* Shared public-surface tokens and tiny base reset.
   Keep this intentionally small: marketing/auth layouts should not need the full app bundle. */
:root {
  --surface: #f8f7fa;
  --surface-container-low: #f1f0f4;
  --surface-container: #e8e7ed;
  --surface-container-high: #dddce3;
  --surface-lowest: #ffffff;
  --surface-variant: #c4c3cc;

  --brand-violet: #706cfc;
  --brand-coral: #fc7f7f;
  --brand-aqua: #54dee9;
  --brand-teal: #72c4cf;
  --brand-ember: var(--brand-coral);
  --brand-brown: #402220;
  --brand-mauve: #bdacba;
  --brand-dust: #c79b94;

  --primary: var(--brand-violet);
  --primary-hover: #5f5aea;
  --primary-dim: #4f49d1;
  --primary-container: #ebe9ff;
  --primary-fixed: #c4bcfc;
  --on-primary: #ffffff;
  --primary-soft: rgba(112, 108, 252, 0.11);

  --secondary: #191b1c;
  --secondary-container: #ebe9ff;
  --tertiary: #9b8597;
  --tertiary-container: #ddd6dc;
  --tertiary-light: var(--brand-dust);

  --accent-rose-tint: #dec7c3;
  --accent-mauve-muted: #c79b94;

  --on-surface: #191b1c;
  --on-surface-mid: #595f61;
  --on-surface-subtle: #9ba3a8;

  --outline-variant: rgba(25, 27, 28, 0.09);
  --outline: rgba(25, 27, 28, 0.16);
  --shadow: rgba(25, 27, 28, 0.06);

  --terracotta: #d86c62;
  --terra-pale: #ffd1c7;
  --gold: #d4a21a;
  --gold-pale: #fde4a9;
  --sky: #3f82d8;
  --sky-pale: #a4c8ff;
  --rose: #d65b78;
  --rose-pale: #ffced8;
  --lilac: #706cfc;
  --lilac-pale: #dedaff;
  --mint: #39a77e;
  --mint-pale: #8eefa4;
  --butter: #d4a21a;
  --butter-pale: #ffe89f;
  --sage-pale: #c5e8b8;

  --error: #c53a3a;
  --error-container: #fbe3e3;

  --focus-ring-color: color-mix(in srgb, var(--primary) 45%, transparent);
  --focus-ring-glow: color-mix(in srgb, var(--primary) 18%, transparent);
  --focus-ring-border: color-mix(in srgb, var(--primary) 42%, var(--outline));

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 2rem;
  --space-8: 2.5rem;
  --space-9: 3rem;

  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-base: 0.875rem;
  --text-md: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;
  --text-3xl: 2.25rem;

  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, system-ui, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  --radius-xs: 0.25rem;
  --radius-sm: 0.375rem;
  --radius-md: 0.625rem;
  --radius-lg: 0.875rem;
  --radius-xl: 1.25rem;
  --radius-2xl: 1.5rem;
  --radius-3xl: 1.75rem;
  --radius-4xl: 2rem;
  --radius-full: 9999px;

  --shadow-sm: 0 1px 1px rgba(25, 27, 28, 0.04);
  --shadow-md: 0 1px 3px rgba(25, 27, 28, 0.08);
  --shadow-lg: 0 4px 14px rgba(25, 27, 28, 0.10);
  --shadow-xl: 0 10px 28px rgba(25, 27, 28, 0.12);
  --shadow-soft: 0 1px 2px rgba(25, 27, 28, 0.05), 0 6px 16px -12px rgba(25, 27, 28, 0.12);
  --shadow-floating: 0 2px 4px rgba(25, 27, 28, 0.08), 0 12px 24px -18px rgba(25, 27, 28, 0.18);
  --shadow-card: 0 1px 2px rgba(25, 27, 28, 0.05), 0 8px 18px rgba(25, 27, 28, 0.06);
  --shadow-card-hover: 0 1px 3px rgba(25, 27, 28, 0.08), 0 12px 24px rgba(25, 27, 28, 0.09);
  --shadow-overlay: 0 3px 10px rgba(25, 27, 28, 0.10), 0 18px 42px rgba(25, 27, 28, 0.14);

  --page-bg: #f8f7fa;
  --page-ambient: none;
  --duration-fast: 80ms;
  --duration-base: 120ms;
  --duration-slow: 180ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-emphasized: cubic-bezier(0.3, 0, 0, 1);
  --ease-decelerate: cubic-bezier(0, 0, 0, 1);
  --ease-accelerate: cubic-bezier(0.3, 0, 1, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { min-height: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  background-color: var(--page-bg);
  background-image: var(--page-ambient);
  background-attachment: fixed;
  background-repeat: no-repeat;
  color: var(--on-surface);
  font-family: var(--font-sans);
  font-feature-settings: "cv11", "ss01", "ss03";
  font-variant-ligatures: common-ligatures contextual;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  line-height: 1.45;
  letter-spacing: -0.01em;
}
a { color: inherit; text-decoration: none; }
img, svg { max-width: 100%; }
button, input, textarea, select { font: inherit; }
:focus-visible { outline: 2px solid var(--focus-ring-color); outline-offset: 2px; }
::selection { background: rgba(112, 108, 252, 0.18); color: var(--on-surface); }

.flash {
  padding: 0.85rem 1.25rem;
  border-radius: var(--radius-md);
  margin-bottom: 1.5rem;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.5;
  box-shadow: var(--shadow-md);
}
.flash-notice { background: rgba(219, 234, 254, 0.78); color: #1e40af; border: 1px solid rgba(29, 78, 216, 0.16); }
.flash-alert { background: rgba(248, 220, 206, 0.68); color: var(--tertiary); border: 1px solid rgba(160, 75, 33, 0.14); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}