/**
 * Luna Design System - Headspace Inspired
 *
 * Clean, calm, friendly design:
 * - Warm, comforting colors
 * - Generous whitespace
 * - Soft rounded shapes
 * - Minimal, uncluttered
 */

/* ===== HEADSPACE-INSPIRED COLOR PALETTE ===== */
:root {
  /* Warm, calming tones */
  --luna-orange: #FA8F54;
  --luna-coral: #F47B67;
  --luna-teal: #69C0B0;
  --luna-navy: #303958;
  --luna-cream: #FDF8F3;
  --luna-sand: #F5EDE4;
  --luna-lavender: #E8E1F0;
  --luna-peach: #FFE5D9;

  /* Text colors */
  --text-dark: #303958;
  --text-medium: #5C6378;
  --text-light: #8E95A5;

  /* Backgrounds */
  --bg-white: #FFFFFF;
  --bg-cream: #FDF8F3;
  --bg-card: #FFFFFF;

  /* Soft shadows */
  --shadow-soft: 0 2px 8px rgba(48, 57, 88, 0.06);
  --shadow-medium: 0 4px 16px rgba(48, 57, 88, 0.08);
  --shadow-card: 0 8px 24px rgba(48, 57, 88, 0.06);
}

/* ===== BODY ===== */
body {
  background: var(--bg-cream);
  color: var(--text-dark);
  line-height: 1.6;
}

/* ===== NAVIGATION ===== */
nav {
  background: var(--bg-white);
  border-bottom: 1px solid rgba(48, 57, 88, 0.06);
  box-shadow: var(--shadow-soft);
}

.nav-brand {
  color: var(--luna-navy);
  font-weight: 700;
}

.nav-links a {
  color: var(--text-medium);
  padding: 10px 16px;
  border-radius: 24px;
}

.nav-links a:hover {
  color: var(--luna-navy);
  background: var(--luna-sand);
}

/* ===== BUTTONS ===== */
.btn {
  border-radius: 24px;
  font-weight: 600;
  padding: 14px 28px;
  border: none;
  cursor: pointer;
}

.btn-primary {
  background: var(--luna-orange);
  color: white;
  box-shadow: var(--shadow-soft);
}

.btn-primary:hover {
  background: #E8804A;
}

.btn-secondary {
  background: var(--bg-white);
  color: var(--luna-navy);
  border: 2px solid var(--luna-sand);
}

.btn-secondary:hover {
  background: var(--luna-sand);
}

/* ===== CARDS ===== */
.card {
  background: var(--bg-card);
  border-radius: 20px;
  box-shadow: var(--shadow-card);
  border: none;
  padding: 24px;
}

.card:hover {
  box-shadow: var(--shadow-medium);
}

/* ===== FORM INPUTS ===== */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="date"],
select,
textarea {
  border: 2px solid var(--luna-sand);
  border-radius: 12px;
  padding: 14px 18px;
  background: var(--bg-white);
  color: var(--text-dark);
  font-size: 16px;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--luna-teal);
  box-shadow: 0 0 0 3px rgba(105, 192, 176, 0.15);
  outline: none;
}

input::placeholder,
textarea::placeholder {
  color: var(--text-light);
}

/* ===== ALERTS ===== */
.alert {
  border-radius: 16px;
  padding: 16px 20px;
  border: none;
}

.alert-success {
  background: #E8F5E9;
  color: #2E7D32;
}

.alert-info {
  background: #E3F2FD;
  color: #1565C0;
}

.alert-error {
  background: #FFEBEE;
  color: #C62828;
}

/* ===== PHASE DISPLAY ===== */
.phase-display {
  border-radius: 24px;
  padding: 32px;
  text-align: center;
}

.phase-display.menstrual {
  background: linear-gradient(135deg, #E3F2FD 0%, #BBDEFB 100%);
}

.phase-display.follicular {
  background: linear-gradient(135deg, #E8F5E9 0%, #C8E6C9 100%);
}

.phase-display.ovulation {
  background: linear-gradient(135deg, #FFF3E0 0%, #FFE0B2 100%);
}

.phase-display.luteal {
  background: linear-gradient(135deg, #FCE4EC 0%, #F8BBD9 100%);
}

/* ===== INVITE CARD ===== */
.invite-card {
  background: var(--bg-white);
  border-radius: 24px;
  box-shadow: var(--shadow-card);
  padding: 32px;
}

.invite-card-header {
  color: var(--luna-navy);
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 16px;
}

.invite-card-code {
  background: var(--luna-navy);
  color: white;
  border-radius: 12px;
  padding: 16px 24px;
  font-size: 1.25rem;
  letter-spacing: 4px;
  font-weight: 600;
  cursor: pointer;
  display: inline-block;
}

/* ===== OPTION BUTTONS ===== */
.option-btn {
  border-radius: 16px;
  border: 2px solid var(--luna-sand);
  background: var(--bg-white);
  padding: 20px;
  cursor: pointer;
}

.option-btn:hover {
  border-color: var(--luna-teal);
  background: rgba(105, 192, 176, 0.05);
}

.option-btn.selected {
  border-color: var(--luna-teal);
  background: rgba(105, 192, 176, 0.1);
}

/* ===== TYPOGRAPHY ===== */
h1, h2, h3 {
  color: var(--luna-navy);
  font-weight: 700;
  line-height: 1.3;
}

h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.125rem; }

p {
  color: var(--text-medium);
}

/* ===== TOGGLE SWITCHES ===== */
.toggle-switch input:checked + .toggle-slider {
  background: var(--luna-teal);
}

/* ===== FOOTER ===== */
footer {
  background: var(--bg-white);
  border-top: 1px solid var(--luna-sand);
}

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--luna-sand);
}

::-webkit-scrollbar-thumb {
  background: var(--text-light);
  border-radius: 4px;
}

/* ===== SELECTION ===== */
::selection {
  background: rgba(105, 192, 176, 0.3);
}

/* ===== UTILITY CLASSES ===== */
.text-center { text-align: center; }
.text-muted { color: var(--text-light); }

/* ===== MOBILE ===== */
@media (max-width: 768px) {
  .card {
    border-radius: 16px;
    margin: 12px;
    padding: 20px;
  }

  .btn {
    border-radius: 20px;
    padding: 14px 24px;
  }

  .container {
    padding-left: 16px;
    padding-right: 16px;
  }
}

@media (max-width: 480px) {
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="date"],
  select,
  textarea {
    font-size: 16px;
    padding: 16px;
    border-radius: 12px;
  }

  .btn {
    min-height: 48px;
    width: 100%;
    margin-bottom: 12px;
  }

  nav .container {
    flex-wrap: wrap;
    padding: 12px;
  }

  .nav-links {
    gap: 6px;
    flex-wrap: wrap;
    justify-content: center;
  }

  .nav-links a {
    padding: 8px 12px;
    font-size: 14px;
  }

  .card {
    border-radius: 16px;
    padding: 20px;
    margin: 12px;
  }

  .phase-display {
    padding: 24px 20px;
    border-radius: 20px;
  }

  .modal-overlay {
    padding: 12px;
    align-items: flex-end;
  }

  .modal-content {
    max-height: 85vh;
    border-radius: 24px 24px 0 0;
  }

  .invite-card {
    border-radius: 20px;
    padding: 24px 16px;
  }

  h1 { font-size: 1.75rem; }
  h2 { font-size: 1.25rem; }
  h3 { font-size: 1rem; }

  .container {
    padding-left: 12px;
    padding-right: 12px;
  }

  .role-selector {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .form-row {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  body {
    padding-bottom: env(safe-area-inset-bottom);
  }

  footer {
    padding-bottom: calc(24px + env(safe-area-inset-bottom));
  }
}

@media (max-width: 375px) {
  .card {
    padding: 16px;
    margin: 8px;
  }

  h1 { font-size: 1.5rem; }

  .btn {
    padding: 12px 16px;
  }
}

/* Touch devices */
@media (hover: none) and (pointer: coarse) {
  .btn:hover,
  .card:hover {
    transform: none;
    box-shadow: var(--shadow-card);
  }

  .nav-links a {
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  input[type="checkbox"],
  input[type="radio"] {
    min-width: 24px;
    min-height: 24px;
  }
}

/* Landscape mobile */
@media (max-height: 500px) and (orientation: landscape) {
  .signup-page {
    min-height: auto;
    padding: 24px 16px;
  }

  .modal-content {
    max-height: 95vh;
  }
}