/* ============================================================
   DESIGN TOKENS
   All colors, spacing, and typography live here as CSS variables.
   Change a token here and it updates everywhere — never hunt
   through the file looking for a hardcoded hex value.
   ============================================================ */

:root {
    /* Colors */
    --color-bg:               #f9f7f4;
    --color-surface:          #ffffff;
    --color-border:           #e8e4df;
    --color-text-primary:     #1a1a1a;
    --color-text-secondary:   #6b6560;
    --color-accent:           #2d6a4f;
    --color-accent-hover:     #245a42;
    --color-danger:           #c0392b;
    --color-danger-hover:     #a93226;
    --color-paywall:          #b7791f;
    --color-paywall-bg:       #fef9ee;

    /* Typography */
    --font-family:  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-size-sm: 0.875rem;   /* 14px — labels, hints */
    --font-size-md: 1rem;       /* 16px — body text */
    --font-size-lg: 1.125rem;   /* 18px — section headings */
    --font-size-xl: 1.5rem;     /* 24px — page headings */
    --font-size-2xl: 2rem;      /* 32px — hero heading */

    /* Spacing — 4px base unit */
    --space-1:  0.25rem;   /*  4px */
    --space-2:  0.5rem;    /*  8px */
    --space-3:  0.75rem;   /* 12px */
    --space-4:  1rem;      /* 16px */
    --space-5:  1.25rem;   /* 20px */
    --space-6:  1.5rem;    /* 24px */
    --space-8:  2rem;      /* 32px */
    --space-10: 2.5rem;    /* 40px */
    --space-12: 3rem;      /* 48px */
    --space-16: 4rem;      /* 64px */

    /* Layout */
    --max-width:      640px;   /* Narrow — this is a utility, not a marketing site */
    --border-radius:  6px;
    --border-radius-lg: 10px;

    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);

    /* Transitions */
    --transition: 150ms ease;
}


/* ============================================================
   RESET
   Minimal reset — remove browser defaults that get in the way.
   We do not use a full reset like Normalize — just the essentials.
   ============================================================ */

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    /* Prevent font scaling in landscape on iOS */
    -webkit-text-size-adjust: 100%;
}

body {
    font-family:      var(--font-family);
    font-size:        var(--font-size-md);
    color:            var(--color-text-primary);
    background-color: var(--color-bg);
    line-height:      1.6;
    min-height:       100vh;
}

img {
    display: block;
    max-width: 100%;
}

/* Remove default list styles — we add them back where needed */
ul,
ol {
    list-style: none;
}

/* Make buttons and inputs inherit font — browsers don't do this by default */
button,
input,
textarea,
select {
    font-family: inherit;
    font-size:   inherit;
}


/* ============================================================
   LAYOUT
   Every page uses the same centered container.
   ============================================================ */

.container {
    width:     100%;
    max-width: var(--max-width);
    margin:    0 auto;
    padding:   0 var(--space-4);
}

/* Page-level vertical rhythm — used on auth pages and dashboard */
.page {
    padding-top:    var(--space-12);
    padding-bottom: var(--space-16);
}


/* ============================================================
   TYPOGRAPHY
   ============================================================ */

h1 {
    font-size:   var(--font-size-2xl);
    font-weight: 700;
    line-height: 1.2;
    color:       var(--color-text-primary);
}

h2 {
    font-size:   var(--font-size-xl);
    font-weight: 600;
    line-height: 1.3;
    color:       var(--color-text-primary);
}

h3 {
    font-size:   var(--font-size-lg);
    font-weight: 600;
    color:       var(--color-text-primary);
}

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

.text-secondary {
    color:     var(--color-text-secondary);
    font-size: var(--font-size-sm);
}

/* Links */
a {
    color:           var(--color-accent);
    text-decoration: none;
    transition:      color var(--transition);
}

a:hover {
    color: var(--color-accent-hover);
}


/* ============================================================
   NAVIGATION
   Minimal top nav — logo left, logout right on dashboard.
   ============================================================ */

.nav {
    border-bottom:    1px solid var(--color-border);
    background-color: var(--color-surface);
    padding:          var(--space-4) 0;
}

.nav__inner {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    max-width:       var(--max-width);
    margin:          0 auto;
    padding:         0 var(--space-4);
}

.nav__logo {
    font-size:   var(--font-size-lg);
    font-weight: 700;
    color:       var(--color-text-primary);
    /* Logo is not a link on the dashboard — just a wordmark */
}

.nav__logo a {
    color:           var(--color-text-primary);
    text-decoration: none;
}


/* ============================================================
   BUTTONS
   Three variants: primary (accent), danger (red), ghost (outline).
   ============================================================ */

.btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             var(--space-2);
    padding:         var(--space-3) var(--space-5);
    border:          1px solid transparent;
    border-radius:   var(--border-radius);
    font-size:       var(--font-size-md);
    font-weight:     500;
    cursor:          pointer;
    transition:      background-color var(--transition), color var(--transition), border-color var(--transition);
    white-space:     nowrap;
    text-decoration: none;
}

.btn:disabled {
    opacity: 0.6;
    cursor:  not-allowed;
}

/* Primary — the main action on any screen */
.btn--primary {
    background-color: var(--color-accent);
    color:            #ffffff;
    border-color:     var(--color-accent);
}

.btn--primary:hover:not(:disabled) {
    background-color: var(--color-accent-hover);
    border-color:     var(--color-accent-hover);
    color:            #ffffff;
}

/* Danger — destructive actions like delete */
.btn--danger {
    background-color: transparent;
    color:            var(--color-danger);
    border-color:     var(--color-danger);
}

.btn--danger:hover:not(:disabled) {
    background-color: var(--color-danger);
    color:            #ffffff;
}

/* Ghost — low-emphasis actions like logout */
.btn--ghost {
    background-color: transparent;
    color:            var(--color-text-secondary);
    border-color:     var(--color-border);
}

.btn--ghost:hover:not(:disabled) {
    background-color: var(--color-border);
    color:            var(--color-text-primary);
}

/* Full width — used inside forms */
.btn--full {
    width: 100%;
}

/* Small — used inline in contact rows */
.btn--sm {
    padding:   var(--space-2) var(--space-3);
    font-size: var(--font-size-sm);
}


/* ============================================================
   FORMS
   Clean, accessible form fields.
   ============================================================ */

.form {
    display:        flex;
    flex-direction: column;
    gap:            var(--space-5);
}

.form__group {
    display:        flex;
    flex-direction: column;
    gap:            var(--space-2);
}

.form__label {
    font-size:   var(--font-size-sm);
    font-weight: 500;
    color:       var(--color-text-primary);
}

.form__input,
.form__select,
.form__textarea {
    width:            100%;
    padding:          var(--space-3) var(--space-4);
    border:           1px solid var(--color-border);
    border-radius:    var(--border-radius);
    background-color: var(--color-surface);
    color:            var(--color-text-primary);
    transition:       border-color var(--transition), box-shadow var(--transition);
    outline:          none;
}

.form__input:focus,
.form__select:focus,
.form__textarea:focus {
    /* Green focus ring — matches accent color, accessible */
    border-color: var(--color-accent);
    box-shadow:   0 0 0 3px rgba(45, 106, 79, 0.15);
}

.form__textarea {
    resize:     vertical;
    min-height: 80px;
}

.form__hint {
    font-size: var(--font-size-sm);
    color:     var(--color-text-secondary);
}

/* Inline field error — shown below the field */
.form__error {
    font-size: var(--font-size-sm);
    color:     var(--color-danger);
}


/* ============================================================
   CARDS
   Surface containers for forms and contact rows.
   ============================================================ */

.card {
    background-color: var(--color-surface);
    border:           1px solid var(--color-border);
    border-radius:    var(--border-radius-lg);
    box-shadow:       var(--shadow-sm);
    padding:          var(--space-8);
}


/* ============================================================
   AUTH PAGES (signup, login)
   Centered card layout — logo above, form inside card.
   ============================================================ */

.auth {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    min-height:      100vh;
    padding:         var(--space-6) var(--space-4);
}

.auth__logo {
    font-size:     var(--font-size-xl);
    font-weight:   700;
    color:         var(--color-text-primary);
    margin-bottom: var(--space-8);
    letter-spacing: -0.5px;
}

.auth__card {
    width:     100%;
    max-width: 400px;
}

.auth__heading {
    font-size:     var(--font-size-xl);
    font-weight:   600;
    margin-bottom: var(--space-2);
}

.auth__subheading {
    color:         var(--color-text-secondary);
    font-size:     var(--font-size-sm);
    margin-bottom: var(--space-6);
}

.auth__footer {
    text-align:  center;
    margin-top:  var(--space-5);
    font-size:   var(--font-size-sm);
    color:       var(--color-text-secondary);
}


/* ============================================================
   ALERT / BANNER MESSAGES
   Global error and success messages — shown above forms.
   ============================================================ */

.alert {
    padding:       var(--space-3) var(--space-4);
    border-radius: var(--border-radius);
    font-size:     var(--font-size-sm);
    margin-bottom: var(--space-4);
    display:       none; /* Hidden by default — JS shows it */
}

.alert--error {
    background-color: #fdf2f2;
    color:            var(--color-danger);
    border:           1px solid #f5c6c6;
}

.alert--success {
    background-color: #f0faf4;
    color:            var(--color-accent);
    border:           1px solid #b7dfc9;
}

/* JS adds this class to make the alert visible */
.alert--visible {
    display: block;
}


/* ============================================================
   DASHBOARD — CONTACT LIST
   ============================================================ */

.dashboard__header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    margin-bottom:   var(--space-6);
}

.dashboard__title {
    font-size:   var(--font-size-xl);
    font-weight: 600;
}

/* Empty state — shown when the user has no contacts yet */
.empty-state {
    text-align:  center;
    padding:     var(--space-16) var(--space-4);
    color:       var(--color-text-secondary);
}

.empty-state__heading {
    font-size:     var(--font-size-lg);
    font-weight:   600;
    color:         var(--color-text-primary);
    margin-bottom: var(--space-2);
}

/* Contact list */
.contact-list {
    display:        flex;
    flex-direction: column;
    gap:            var(--space-3);
}

/* Single contact row */
.contact-card {
    background-color: var(--color-surface);
    border:           1px solid var(--color-border);
    border-radius:    var(--border-radius-lg);
    padding:          var(--space-4) var(--space-5);
    display:          flex;
    align-items:      center;
    justify-content:  space-between;
    gap:              var(--space-4);
    box-shadow:       var(--shadow-sm);
    transition:       box-shadow var(--transition);
}

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

.contact-card__info {
    flex: 1;
    min-width: 0; /* Prevents text overflow breaking flex layout */
}

.contact-card__name {
    font-weight:   600;
    font-size:     var(--font-size-md);
    color:         var(--color-text-primary);
    margin-bottom: var(--space-1);
    /* Truncate long names gracefully */
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
}

.contact-card__meta {
    font-size: var(--font-size-sm);
    color:     var(--color-text-secondary);
}

/* Overdue indicator — shown when a contact is past their rhythm */
.contact-card__meta--overdue {
    color:       var(--color-danger);
    font-weight: 500;
}

.contact-card__actions {
    display:    flex;
    align-items: center;
    gap:        var(--space-2);
    flex-shrink: 0; /* Never shrink the action buttons */
}


/* ============================================================
   ADD CONTACT FORM
   Shown inline above the contact list on the dashboard.
   Hidden by default — toggled by the "Add Contact" button.
   ============================================================ */

.add-contact {
    background-color: var(--color-surface);
    border:           1px solid var(--color-border);
    border-radius:    var(--border-radius-lg);
    padding:          var(--space-6);
    margin-bottom:    var(--space-6);
    box-shadow:       var(--shadow-sm);

    /* Hidden by default */
    display: none;
}

.add-contact--visible {
    display: block;
}

.add-contact__heading {
    font-size:     var(--font-size-lg);
    font-weight:   600;
    margin-bottom: var(--space-5);
}

/* Two column layout for name + rhythm on wider screens */
.add-contact__row {
    display: grid;
    gap:     var(--space-4);
    grid-template-columns: 1fr;
}

@media (min-width: 480px) {
    .add-contact__row {
        grid-template-columns: 1fr 1fr;
    }
}

.add-contact__actions {
    display:     flex;
    gap:         var(--space-3);
    margin-top:  var(--space-2);
}


/* ============================================================
   PAYWALL BANNER
   Shown inline when the user hits the 6 contact free tier limit.
   Warm amber — noticeable but not alarming.
   ============================================================ */

.paywall {
    background-color: var(--color-paywall-bg);
    border:           1px solid #f6d68a;
    border-radius:    var(--border-radius-lg);
    padding:          var(--space-5) var(--space-6);
    margin-bottom:    var(--space-6);
    display:          none;
}

.paywall--visible {
    display: block;
}

.paywall__heading {
    font-size:     var(--font-size-md);
    font-weight:   600;
    color:         var(--color-paywall);
    margin-bottom: var(--space-2);
}

.paywall__text {
    font-size:     var(--font-size-sm);
    color:         var(--color-text-secondary);
    margin-bottom: var(--space-4);
}

.paywall__btn {
    background-color: var(--color-paywall);
    color:            #ffffff;
    border-color:     var(--color-paywall);
}

.paywall__btn:hover {
    background-color: #9c6a18;
    border-color:     #9c6a18;
}


/* ============================================================
   LANDING PAGE (index.html)
   ============================================================ */

.hero {
    padding:    var(--space-16) var(--space-4);
    text-align: center;
}

.hero__logo {
    font-size:     var(--font-size-lg);
    font-weight:   700;
    color:         var(--color-accent);
    margin-bottom: var(--space-8);
    letter-spacing: -0.5px;
}

.hero__heading {
    font-size:     var(--font-size-2xl);
    font-weight:   700;
    margin-bottom: var(--space-4);
    line-height:   1.2;
    color:         var(--color-text-primary);
}

.hero__subheading {
    font-size:     var(--font-size-lg);
    color:         var(--color-text-secondary);
    margin-bottom: var(--space-8);
    max-width:     480px;
    margin-left:   auto;
    margin-right:  auto;
}

.hero__actions {
    display:         flex;
    gap:             var(--space-3);
    justify-content: center;
    flex-wrap:       wrap;
}

/* Feature list — three simple bullet points below the hero */
.features {
    padding:          var(--space-12) var(--space-4);
    border-top:       1px solid var(--color-border);
    max-width:        var(--max-width);
    margin:           0 auto;
}

.features__list {
    display:        flex;
    flex-direction: column;
    gap:            var(--space-5);
}

.feature {
    display:    flex;
    gap:        var(--space-4);
    align-items: flex-start;
}

.feature__icon {
    /* Simple text emoji icon — no icon library needed */
    font-size:   var(--font-size-lg);
    flex-shrink: 0;
    margin-top:  var(--space-1);
}

.feature__text strong {
    display:       block;
    font-weight:   600;
    color:         var(--color-text-primary);
    margin-bottom: var(--space-1);
}

.feature__text p {
    font-size: var(--font-size-sm);
}


/* ============================================================
   UTILITY CLASSES
   ============================================================ */

/* Visually hide elements but keep them accessible to screen readers */
.sr-only {
    position: absolute;
    width:    1px;
    height:   1px;
    padding:  0;
    margin:   -1px;
    overflow: hidden;
    clip:     rect(0, 0, 0, 0);
    border:   0;
}

/* Loading state on buttons — added by JS during fetch */
.btn--loading {
    opacity: 0.7;
    cursor:  wait;
}

/* Spacers */
.mt-4  { margin-top: var(--space-4); }
.mt-6  { margin-top: var(--space-6); }
.mb-4  { margin-bottom: var(--space-4); }
.mb-6  { margin-bottom: var(--space-6); }


/* ============================================================
   RESPONSIVE
   The layout is already mobile-first — these are the only
   adjustments needed for wider screens.
   ============================================================ */

@media (min-width: 640px) {
    h1 {
        font-size: 2.5rem;
    }

    .hero__heading {
        font-size: 2.5rem;
    }

    .card {
        padding: var(--space-10);
    }
}

/* ============================================================
   PRICING SECTION
   ============================================================ */

.pricing {
    padding:    var(--space-12) var(--space-4);
    border-top: 1px solid var(--color-border);
    text-align: center;
}

.pricing__heading {
    font-size:     var(--font-size-xl);
    font-weight:   700;
    margin-bottom: var(--space-2);
    color:         var(--color-text-primary);
}

.pricing__subheading {
    color:         var(--color-text-secondary);
    margin-bottom: var(--space-8);
}

.pricing__cards {
    display:         flex;
    gap:             var(--space-6);
    justify-content: center;
    flex-wrap:       wrap;
    max-width:       640px;
    margin:          0 auto;
}

.pricing__card {
    flex:      1;
    min-width: 240px;
    max-width: 280px;
    text-align: left;
}

/* Featured card — Pro tier gets the accent border */
.pricing__card--featured {
    border-color: var(--color-accent);
    box-shadow:   0 4px 20px rgba(45, 106, 79, 0.15);
}

.pricing__tier {
    font-size:     var(--font-size-sm);
    font-weight:   600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color:         var(--color-accent);
    margin-bottom: var(--space-2);
}

.pricing__amount {
    font-size:   2.5rem;
    font-weight: 700;
    color:       var(--color-text-primary);
    line-height: 1;
}

.pricing__period {
    font-size:     var(--font-size-sm);
    color:         var(--color-text-secondary);
    margin-bottom: var(--space-5);
}

.pricing__features {
    list-style:    none;
    margin-bottom: var(--space-6);
    display:       flex;
    flex-direction: column;
    gap:           var(--space-2);
}

.pricing__features li {
    font-size:   var(--font-size-sm);
    color:       var(--color-text-secondary);
    padding-left: var(--space-4);
    position:    relative;
}

/* Checkmark before each feature */
.pricing__features li::before {
    content:  "✓";
    position: absolute;
    left:     0;
    color:    var(--color-accent);
    font-weight: 600;
}

/* ============================================================
   FOOTER
   ============================================================ */

.footer {
    border-top:  1px solid var(--color-border);
    padding:     var(--space-8) var(--space-4);
    text-align:  center;
    display:     flex;
    flex-direction: column;
    align-items: center;
    gap:         var(--space-3);
}

.footer__links {
    display: flex;
    gap:     var(--space-5);
    flex-wrap: wrap;
    justify-content: center;
}

.footer__links a {
    font-size: var(--font-size-sm);
    color:     var(--color-text-secondary);
}

.footer__links a:hover {
    color: var(--color-accent);
}

/* ============================================================
   LEGAL PAGES (terms, privacy, refund)
   ============================================================ */

.legal-body h2 {
    font-size:     var(--font-size-lg);
    font-weight:   600;
    color:         var(--color-text-primary);
    margin-top:    var(--space-8);
    margin-bottom: var(--space-2);
}

.legal-body p {
    color:         var(--color-text-secondary);
    margin-bottom: var(--space-4);
    line-height:   1.7;
}