/* ===== Design System Variables =====
   These are the ORIGINAL Phase-2 token names. The app screens (dashboard,
   wizard, chat) and their stylesheets are all written against them, so rather
   than rewrite three stylesheets we point the tokens at the Lamplight day
   palette defined in landing-day.css. One remap repaints every app screen.

   The var() references resolve against :root's full cascade, so it does not
   matter that landing-day.css loads after this file. The literal fallbacks are
   the same values, kept so the app never renders unstyled purple if that
   stylesheet fails to load. Lamplight is the source of truth - change a colour
   there, not here. */
:root {
  --gradient-primary: linear-gradient(135deg, var(--n-lamplight-deep, #A8621A) 0%, #8E5216 100%);
  --color-primary: var(--n-lamplight, #C97A1F);
  --color-primary-dark: var(--n-lamplight-deep, #A8621A);
  --color-success: var(--n-leaf, #3E8C6A);
  --color-danger: #ef4444;
  --color-warning: #f59e0b;
  --color-info: #3b82f6;

  --color-bg: var(--n-paper, #FFFFFF);
  --color-surface: var(--n-surface, #FFFFFF);
  --color-text: var(--n-ink, #171B26);
  --color-text-muted: var(--n-dusk, #5B6272);
  --color-border: var(--n-line, rgba(23, 27, 38, 0.10));

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);

  --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;
  --space-16: 4rem;
  --space-20: 5rem;

  --transition-fast: 150ms ease-in-out;
  --transition-normal: 300ms ease-in-out;
}

/* ===== Reset ===== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
  color: var(--color-text);
  background-color: var(--color-bg);
  line-height: 1.6;
}

/* ===== Typography ===== */
h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: var(--space-4);
}

h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }
h5 { font-size: 1.125rem; }
h6 { font-size: 1rem; }

p {
  margin-bottom: var(--space-4);
  color: var(--color-text);
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--color-primary-dark);
}

/* ===== Layout ===== */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-4);
}

.main-container {
  min-height: calc(100vh - var(--nav-h, 80px) - 200px);
  min-height: calc(100dvh - var(--nav-h, 80px) - 200px);
}

/* ===== Navigation ===== */
.navbar {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-4) 0;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: var(--shadow-sm);
}

.navbar-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav-brand {
  font-size: 1.5rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.brand-link {
  color: var(--color-text);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  transition: color var(--transition-fast);
}

.brand-link:hover {
  color: var(--color-primary);
}

.brand-icon {
  font-size: 1.75rem;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  flex-wrap: wrap;
}

.nav-link {
  color: var(--color-text);
  font-weight: 500;
  transition: color var(--transition-fast);
  white-space: nowrap;
}

.nav-link:hover {
  color: var(--color-primary);
}

.nav-dropdown {
  position: relative;
}

.nav-user {
  background: none;
  border: none;
  color: var(--color-text);
  font-weight: 500;
  cursor: pointer;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  transition: background-color var(--transition-fast);
}

.nav-user:hover {
  background-color: var(--color-bg);
}

.nav-dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  min-width: 200px;
  display: none;
  flex-direction: column;
  overflow: hidden;
  margin-top: var(--space-2);
}

.nav-dropdown-menu.active {
  display: flex;
}

.dropdown-item {
  padding: var(--space-3) var(--space-4);
  color: var(--color-text);
  display: block;
  white-space: nowrap;
  transition: background-color var(--transition-fast);
}

.dropdown-item:hover {
  background-color: var(--color-bg);
  color: var(--color-primary);
}

.dropdown-divider {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: 0;
}

/* ===== Forms ===== */
.form-group {
  margin-bottom: var(--space-6);
}

.form-label {
  display: block;
  font-weight: 600;
  margin-bottom: var(--space-2);
  color: var(--color-text);
  font-size: 0.95rem;
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: 1rem;
  font-family: inherit;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  background-color: var(--color-surface);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--n-lamplight-soft, rgba(201, 122, 31, 0.10));
}

.form-textarea {
  resize: vertical;
  min-height: 120px;
}

/* ===== Buttons ===== */
.btn {
  display: inline-block;
  padding: var(--space-3) var(--space-6);
  border: none;
  /* Pill, to match the lamplight buttons in site-day.css. The app screens and
     the marketing pages were shipping two different button shapes. */
  border-radius: var(--radius-full);
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: all var(--transition-fast);
  text-decoration: none;
  white-space: nowrap;
  text-align: center;
  font-family: inherit;
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.btn-primary {
  background: var(--gradient-primary);
  color: white;
}

.btn-primary:hover {
  opacity: 0.9;
}

.btn-secondary {
  background: var(--color-surface);
  color: var(--color-text);
  border: 2px solid var(--color-border);
}

.btn-secondary:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.btn-outline {
  background: transparent;
  color: var(--color-primary);
  border: 2px solid var(--color-primary);
}

.btn-outline:hover {
  background: var(--n-lamplight-soft, rgba(201, 122, 31, 0.10));
}

.btn-sm {
  padding: var(--space-2) var(--space-4);
  font-size: 0.875rem;
}

.btn-lg {
  padding: var(--space-4) var(--space-8);
  font-size: 1.1rem;
}

.btn-block {
  width: 100%;
  display: block;
}

.btn-danger {
  background: var(--color-danger);
  color: white;
}

.btn-success {
  background: var(--color-success);
  color: white;
}

/* ===== Flash Messages ===== */
.flash-container {
  margin-bottom: var(--space-6);
}

.flash {
  padding: var(--space-4);
  border-radius: var(--radius-md);
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-3);
  animation: slideDown 300ms ease-out;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.flash-success {
  background-color: rgba(16, 185, 129, 0.1);
  color: #047857;
  border-left: 4px solid var(--color-success);
}

.flash-error {
  background-color: rgba(239, 68, 68, 0.1);
  color: #b91c1c;
  border-left: 4px solid var(--color-danger);
}

.flash-info {
  background-color: rgba(59, 130, 246, 0.1);
  color: #1e40af;
  border-left: 4px solid var(--color-info);
}

.flash-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: inherit;
  padding: 0;
  display: flex;
  align-items: center;
}

.flash-close:hover {
  opacity: 0.7;
}

/* ===== Footer ===== */
.footer {
  background: var(--color-text);
  color: var(--color-surface);
  padding: var(--space-16) 0 var(--space-8);
  margin-top: var(--space-20);
}

.footer-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-8);
  margin-bottom: var(--space-12);
}

.footer-section h2 {
  margin-bottom: var(--space-4);
  color: var(--color-surface);
}

.footer-section ul {
  list-style: none;
}

.footer-section a {
  color: rgba(255, 255, 255, 0.7);
  display: block;
  margin-bottom: var(--space-2);
  transition: color var(--transition-fast);
}

.footer-section a:hover {
  color: var(--color-surface);
}

.social-links {
  display: flex;
  gap: var(--space-4);
}

.social-link {
  font-size: 1.5rem;
  transition: transform var(--transition-fast);
}

.social-link:hover {
  transform: scale(1.2);
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: var(--space-6);
  text-align: center;
  color: rgba(255, 255, 255, 0.7);
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
  h1 { font-size: 2rem; }
  h2 { font-size: 1.5rem; }
  h3 { font-size: 1.25rem; }

  .navbar-container {
    flex-direction: column;
    gap: var(--space-4);
  }

  .nav-links {
    gap: var(--space-4);
    justify-content: center;
  }

  .container {
    padding: 0 var(--space-4);
  }

  .footer-content {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 480px) {
  h1 { font-size: 1.5rem; }
  h2 { font-size: 1.25rem; }

  .btn-lg {
    padding: var(--space-3) var(--space-4);
    font-size: 1rem;
  }

  .nav-links {
    flex-direction: column;
    width: 100%;
    gap: var(--space-2);
  }

  .footer-content {
    grid-template-columns: 1fr;
  }
}