/* LifeBook | theme.css | 2025-08-27
   Purpose: Brand tokens, base styles, and core components.
   Order of inclusion: theme.css → style.css → responsive.css
   Update: 2025-09-01 (non-breaking visual upgrades; accessibility & autofill fixes)
*/

/* ==============================
   Brand Tokens — Pastel Palette
   ============================== */
:root {
  /* Surfaces & Text */
  --bg:            #FAFAFC;  /* page background (soft, luxurious) */
  --surface:       #ffffff;  /* card/base surface */
  --surface-2:     #F6F8FF;  /* soft panels (secondary) */
  --text:          #111827;  /* primary text */
  --muted:         #6B7280;  /* secondary text */
  --border:        #E6E8EE;  /* subtle borders */
  --soft-border:   #EEF1F4;

  /* Brand */
  --primary-color:   #7B6EF6;  /* pastel violet */
  --primary-600:     #6A5CF0;
  --primary-700:     #5949D1;
  --accent-color:    #FFB86C;  /* peach accent */

  /* Status */
  --success-color: #2ECC71;
  --danger-color:  #E74C3C;
  --warning-color: #FFB020;

  /* Radii / Shadows / Spacing */
  --radius:    12px;
  --radius-lg: 16px;
  --shadow-1:  0 1px 4px rgba(0,0,0,.06);
  --shadow-2:  0 8px 30px rgba(15,23,42,.08);
  --ring:      rgba(123,110,246,.35);

  --space-1: 8px;
  --space-2: 12px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 64px;

  /* Optional extension tokens (non-breaking) */
  --radius-2xl: 20px;
  --shadow-card: 0 12px 40px rgba(17, 24, 39, .07);
  --ease: cubic-bezier(.2,.7,.2,1);
  --fast: 150ms;
  --slow: 250ms;
}

/* =================
   Base & Typography
   ================= */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  color: var(--text);
  background: var(--bg);
  color-scheme: light dark;
  font-family: ui-sans-serif, -apple-system, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 { color: var(--text); line-height: 1.2; }
h1 { font-weight: 800; font-size: clamp(28px, 4.2vw, 40px); letter-spacing: -0.01em; }
h2 { font-weight: 700; font-size: clamp(22px, 3.2vw, 28px); }
h3 { font-weight: 600; font-size: clamp(18px, 2.6vw, 22px); }
p, ul, ol { color: var(--text); }
a { color: var(--primary-color); text-decoration: none; }
a:hover { color: var(--primary-600); text-decoration: underline; }

img, video { max-width: 100%; height: auto; display: block; }

/* ===========
   Utilities
   =========== */
.container {
  width: 100%;
  max-width: 1120px;
  margin-inline: auto;
  padding: 0 var(--space-4);
}
.content { padding: var(--space-5) 0; }
.muted { color: var(--muted); }
.hidden { display: none !important; }
.nowrap { white-space: nowrap; }
.sr-only, .visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: -999px; top: -999px;
}
.skip-link:focus {
  left: 16px; top: 16px; z-index: 1000; padding: 8px 12px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
}

/* Global width constraints for common wrappers (no PHP changes needed) */
main, .page, .wrap, .content-wrap, body > form {
  max-width: 1120px;
  margin-inline: auto;
  padding-inline: var(--space-4);
}

/* Subtle motion defaults */
.card, .btn, .button, button, input, select, textarea, .nav-link {
  transition: box-shadow var(--fast) var(--ease), background var(--slow) var(--ease), transform var(--fast) var(--ease), border-color var(--fast) var(--ease);
}

/* Global focus visibility (accessible, elegant) */
:where(button, [href], input, select, textarea, [tabindex]):focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--ring);
  border-color: var(--primary-600);
}

/* ========
   Buttons
   ======== */
.btn, .button, button, input[type="submit"] {
  background: var(--primary-color);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 12px 16px;
  min-height: 44px; /* touch target */
  font-weight: 600;
  box-shadow: var(--shadow-1);
  transition: background .2s ease, transform .06s ease, box-shadow .2s ease;
  cursor: pointer;
}
.btn:hover, .button:hover, button:hover { background: var(--primary-600); transform: translateY(-1px); }
.btn:active, .button:active, button:active { background: var(--primary-700); transform: translateY(0); box-shadow: none; }
.btn:focus-visible, .button:focus-visible, button:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring); }
.btn:disabled, .button:disabled, button:disabled, input[type="submit"]:disabled { opacity: .6; cursor: not-allowed; }

.btn-primary { background: var(--primary-color); color: #fff; }
.btn-cta     { background: var(--accent-color); color: #221e1f; }
.btn-outline {
  background: transparent; color: var(--text);
  border: 1px solid var(--border);
}
.logout-btn { background: transparent; border: 1px solid var(--border); color: var(--text); }

/* =====
   Forms
   ===== */
input[type="text"], input[type="email"], input[type="password"],
input[type="date"], input[type="file"],
select, textarea {
  width: 100%;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
  caret-color: var(--text);
}
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
input:focus, select:focus, textarea:focus {
  border-color: var(--primary-600);
  box-shadow: 0 0 0 3px var(--ring);
}
label { display: inline-block; margin-bottom: 6px; color: var(--muted); font-weight: 600; }

/* Autofill visibility (Chrome/Safari) — fixes invisible username/password text */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-text-fill-color: #111827 !important;
  -webkit-box-shadow: 0 0 0 1000px var(--surface) inset !important;
  transition: background-color 9999s ease-out, color 9999s ease-out;
}

/* Invalid states (non-breaking, only if used) */
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"],
.is-invalid input, .is-invalid select, .is-invalid textarea {
  border-color: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, .25);
}

/* ========
   Layout
   ======== */
.section { padding: var(--space-5) 0; }
.grid { display: grid; gap: var(--space-3); }
.grid.cards { grid-template-columns: 1fr; }

/* =======
   Cards
   ======= */
.card {
  background: var(--surface);
  border: 1px solid var(--soft-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  padding: var(--space-4);
}
.card.elevated { box-shadow: var(--shadow-card); border-color: transparent; }

/* =========
   App Shell
   ========= */
.app-header {
  background: var(--surface);
  border-bottom: 1px solid var(--soft-border);
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 64px;
}
.brand .logo { height: 28px; width: auto; display: block; }

.nav-list { list-style: none; display: flex; gap: 10px; padding: 0; margin: 0; }
.nav-link {
  display: inline-block; padding: 10px 12px; border-radius: 999px;
  color: var(--text); border: 1px solid transparent;
}
.nav-link:hover { background: var(--surface-2); }
.nav-link.is-active {
  background: var(--surface-2);
  border-color: var(--soft-border);
}

/* =====
   Hero
   ===== */
.hero {
  text-align: center;
  padding: var(--space-6) 0 var(--space-5);
  background: linear-gradient(135deg, rgba(123,110,246,.06), rgba(255,184,108,.06));
  border-radius: var(--radius-2xl);
}
.hero .logo { height: 40px; margin: 0 auto var(--space-3); }
.tagline { font-weight: 800; margin-bottom: var(--space-2); }
.subtitle { color: var(--muted); max-width: 60ch; margin: 0 auto; }

/* ==========
   Auth Form
   ========== */
.login-form {
  max-width: 420px;
  margin: var(--space-5) auto;
  background: var(--surface);
  border: 1px solid var(--soft-border);
  border-radius: var(--radius);
  padding: var(--space-4);
  box-shadow: var(--shadow-1);
}
.login-form form { display: grid; gap: var(--space-3); margin-top: var(--space-2); }
.signup-prompt { margin-top: var(--space-3); }

/* Optional: give login/signup pages a premium backdrop without PHP changes */
body.login, body.signup, body.auth {
  background: linear-gradient(135deg, #EEF2FF 0%, #FDF2F8 100%) fixed;
}

/* ===========
   Features
   =========== */
.features-preview {
  max-width: 780px; margin: var(--space-6) auto;
  text-align: left; background: var(--surface); border: 1px solid var(--soft-border);
  border-radius: var(--radius); padding: var(--space-4);
}
.features-preview ul { padding-left: 1.25rem; }

/* ===========
   Feed Styles
   =========== */
.feed-header { display: grid; gap: var(--space-3); padding: var(--space-4) 0; }
.feed-filters { display: grid; gap: var(--space-2); grid-template-columns: 1fr; }
.feed-list, .feed-container { display: grid; gap: var(--space-3); }
.feed-card { background: var(--surface); border: 1px solid var(--soft-border); border-radius: var(--radius); padding: var(--space-4); box-shadow: var(--shadow-1); }
.feed-meta { display: flex; align-items: center; justify-content: space-between; color: var(--muted); margin-bottom: var(--space-2); }
.feed-prompt { margin-top: var(--space-2); background: var(--surface-2); border: 1px dashed var(--soft-border); border-radius: 10px; padding: 10px 12px; }
.feed-loader { text-align: center; color: var(--muted); padding: var(--space-3) 0; }

/* ============
   Dashboard
   ============ */
.dashboard-header { display:flex; align-items:center; justify-content:space-between; gap: var(--space-3); padding: var(--space-4) 0; }
.toast-container { position: fixed; right: 12px; bottom: 12px; z-index: 999; }
.toast { background: #111; color: #fff; padding: 10px 12px; border-radius: 10px; box-shadow: var(--shadow-2); }

/* =========
   Admin UI
   ========= */
.table-responsive { width: 100%; overflow-x: auto; }
.admin-table { width: 100%; border-collapse: collapse; background: var(--surface); border-radius: var(--radius); overflow: hidden; }
.admin-table th, .admin-table td { padding: 12px 14px; border-bottom: 1px solid var(--soft-border); text-align: left; }
.admin-table th { background: var(--surface-2); color: var(--muted); font-weight: 700; }

/* ======
   Footer
   ====== */
.footer {
  border-top: 1px solid var(--soft-border);
  background: var(--surface);
  padding: var(--space-4) 0;
  margin-top: var(--space-6);
}

/* ==========================
   Desktop polish (non-breaking)
   ========================== */
@media (min-width: 992px) {
  .grid.cards { grid-template-columns: repeat(3, 1fr); }
  .feed-filters { grid-template-columns: repeat(3, 1fr); }
  .login-form, .signup-form, .auth .card { box-shadow: var(--shadow-card); }
}

/* ==========================
   Prefers Dark (auto elegant)
   ========================== */
@media (prefers-color-scheme: dark) {
  :root {
    --bg:        #0b0d11;
    --surface:   #12141a;
    --surface-2: #171a22;
    --text:      #eef2f7;
    --muted:     #9aa3af;
    --border:    #1f2430;
    --soft-border:#1b212f;

    --primary-color:#9aa2ff;
    --primary-600:  #7d8cff;
    --primary-700:  #6a7aff;
    --ring: rgba(122,130,255,.35);
  }

  .toast { background: #eaeef9; color: #12141a; }

  /* Ensure autofilled text is readable in dark as well */
  input:-webkit-autofill,
  input:-webkit-autofill:hover,
  input:-webkit-autofill:focus {
    -webkit-text-fill-color: #eef2f7 !important;
    -webkit-box-shadow: 0 0 0 1000px var(--surface) inset !important;
  }
}