@import url('tokens/fonts.css');
@import url('tokens/colors.css');
@import url('tokens/typography.css');
@import url('tokens/spacing.css');

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--surface-page);color:var(--text-primary);font:var(--text-body-md);margin:0}
a{color:var(--link-color);text-decoration:none}
a:hover{color:var(--link-hover);text-decoration:underline}
img{max-width:100%;display:block}
section{scroll-margin-top:72px}

/* ===== NavBar ===== */
.navbar{display:flex;align-items:center;justify-content:space-between;padding:18px 32px;background:var(--surface-card);border-bottom:1px solid var(--border-subtle);font-family:var(--font-body);position:sticky;top:0;z-index:20}
.navbar__brand{font:900 22px var(--font-display);color:var(--text-primary);text-decoration:none}
.navbar__links{display:flex;align-items:center;gap:28px}
.navbar__link{font:700 14px var(--font-body);color:var(--text-secondary);cursor:pointer;text-decoration:none}
.navbar__link:hover{color:var(--brand-primary);text-decoration:none}
.navbar__link.active{color:var(--brand-primary)}
.navbar__toggle{display:none;background:none;border:none;cursor:pointer;padding:4px}
.navbar__toggle span{display:block;width:22px;height:2px;background:var(--text-primary);margin:5px 0;transition:transform var(--duration-fast) var(--ease-standard)}

/* ===== Hero ===== */
.hero{padding:80px 60px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:20px;background:var(--surface-page)}
.hero__eyebrow{font:var(--text-label);color:var(--brand-primary);text-transform:uppercase;letter-spacing:var(--tracking-wider)}
.hero__title{font:var(--text-display-xl);color:var(--text-primary);margin:0;max-width:760px;letter-spacing:var(--tracking-tight)}
.hero__subtitle{font:var(--text-body-lg);color:var(--text-secondary);max-width:560px;margin:0}

/* ===== Card grid sections ===== */
.section-cards{padding:0 60px 70px;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,280px));gap:20px;justify-content:center}

/* ===== Card ===== */
.card{background:var(--surface-card);border-radius:var(--radius-md);box-shadow:var(--shadow-md);overflow:hidden;display:flex;flex-direction:column;font-family:var(--font-body)}
.card__image{aspect-ratio:4/3;background:var(--color-sand-200);background-size:cover;background-position:center}
.card__body{padding:20px;display:flex;flex-direction:column;gap:8px;flex:1}
.card__title{font:var(--text-heading-md);color:var(--text-primary)}
.card__text{font:var(--text-body-md);color:var(--text-secondary)}
.card__footer{margin-top:auto;padding-top:8px}

/* ===== Badge ===== */
.badge{display:inline-flex;align-items:center;padding:6px 14px;border-radius:var(--radius-pill);font:var(--text-label);text-transform:uppercase;letter-spacing:var(--tracking-wide);border:none}
.badge--terracotta{background:var(--color-terracotta-100);color:var(--color-terracotta-700)}
.badge--gold{background:var(--color-gold-300);color:var(--color-terracotta-800)}
.badge--ink{background:var(--color-ink-900);color:var(--text-inverse)}
.badge--outline{background:transparent;color:var(--brand-primary);border:1.5px solid var(--brand-primary)}

/* ===== Button ===== */
.button{display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-pill);cursor:pointer;letter-spacing:0.01em;transition:all var(--duration-fast) var(--ease-standard);border:none}
.button:active{transform:scale(.96)}
.button--sm{padding:8px 16px;font:700 13px var(--font-body)}
.button--md{padding:12px 24px;font:var(--text-label)}
.button--lg{padding:16px 32px;font:800 16px var(--font-body)}
.button--primary{background:var(--brand-primary);color:#fff}
.button--primary:hover{background:var(--brand-primary-hover)}
.button--secondary{background:var(--brand-secondary);color:#fff}
.button--secondary:hover{background:var(--brand-secondary-hover)}
.button--outline{background:transparent;color:var(--brand-primary);border:2px solid var(--brand-primary)}
.button--outline:hover{background:var(--color-terracotta-50)}
.button--ghost{background:transparent;color:var(--text-primary)}
.button--ghost:hover{background:var(--surface-sunken)}

/* ===== StreakTracker ===== */
.streak{display:flex;flex-direction:column;gap:10px;font-family:var(--font-body)}
.streak__label{font:var(--text-label);color:var(--text-secondary);text-transform:uppercase;letter-spacing:var(--tracking-wide)}
.streak__days{display:flex;gap:6px}
.streak__day{width:28px;height:28px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;font:700 12px var(--font-body);background:var(--surface-sunken);color:var(--text-muted)}
.streak__day--active{background:var(--brand-primary);color:#fff}

/* ===== QuoteCard ===== */
.section-quote{padding:0 60px 70px;display:flex;justify-content:center}
.quote-card{background:var(--color-terracotta-500);border-radius:var(--radius-lg);padding:28px;display:flex;flex-direction:column;gap:16px;color:#fff;font-family:var(--font-body);max-width:640px;width:100%}
.quote-card__text{font:800 22px/1.3 var(--font-display);letter-spacing:var(--tracking-tight)}
.quote-card__meta{font:var(--text-label);opacity:0.9}

/* ===== Blog section ===== */
.section-blog{padding:0 60px 80px}
.section-blog__heading{font:var(--text-heading-lg);color:var(--text-primary);margin-bottom:20px;text-align:center}

/* ===== Footer ===== */
.footer{padding:40px 60px;background:var(--color-ink-900);color:var(--text-inverse);display:flex;justify-content:space-between;align-items:center;font-family:var(--font-body);flex-wrap:wrap;gap:12px}
.footer__brand{font:900 20px var(--font-display)}
.footer__copy{font:var(--text-body-sm);opacity:0.7}

/* ===== Responsive ===== */
@media (max-width:860px){
  .navbar__links{position:fixed;top:60px;left:0;right:0;background:var(--surface-card);flex-direction:column;align-items:flex-start;gap:0;padding:8px 0;border-bottom:1px solid var(--border-subtle);transform:translateY(-8px);opacity:0;pointer-events:none;transition:all var(--duration-base) var(--ease-standard)}
  .navbar__links.is-open{transform:translateY(0);opacity:1;pointer-events:auto}
  .navbar__link{padding:12px 24px;width:100%}
  .navbar__toggle{display:block}
  .hero{padding:56px 24px}
  .section-cards{padding:0 24px 48px}
  .section-quote{padding:0 24px 48px}
  .section-blog{padding:0 24px 56px}
  .footer{padding:32px 24px;flex-direction:column;align-items:flex-start}
}