/* KeepCal web — tokens mirror design.md */
:root {
  --primary: #11756D;
  --on-primary: #FFFFFF;
  --primary-soft: #E3F2F0;
  --background: #F6F8F7;
  --surface: #FFFFFF;
  --on-surface: #121716;
  --text-secondary: #56605E;
  --text-muted: #8A9391;
  --border: #E2E7E6;
  --divider: #EDF1F0;
  --success: #1E8E4E;
  --protein: #4F63E8;
  --carbs: #E3A32B;
  --fat: #D6538A;

  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-full: 9999px;
  --gutter: 16px;
  --max: 720px;
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --primary: #4CC3B5;
    --on-primary: #062320;
    --primary-soft: #15302D;
    --background: #0E1413;
    --surface: #161E1D;
    --on-surface: #EEF3F2;
    --text-secondary: #A7B2B0;
    --text-muted: #74807E;
    --border: #2A3533;
    --divider: #222C2A;
    --success: #4CC47E;
    --protein: #8E9BFF;
    --carbs: #F2C25E;
    --fat: #F08BB5;
  }
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--background);
  color: var(--on-surface);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.5;
  font-feature-settings: "tnum" 1;
}

a { color: var(--primary); text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
@media (min-width: 428px) { :root { --gutter: 20px; } }

/* Header */
.site-header { padding: 20px 0; }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--on-surface); font-weight: 700; font-size: 20px; letter-spacing: -0.3px; min-height: 44px; }
.brand svg { width: 28px; height: 28px; color: var(--primary); }

/* Hero */
.hero { padding-top: 48px; padding-bottom: 32px; text-align: center; }
.hero h1 { font-size: clamp(34px, 8vw, 48px); line-height: 1.1; letter-spacing: -0.6px; margin: 0 0 12px; font-weight: 700; }
.hero p { color: var(--text-secondary); margin: 0 auto; max-width: 30em; }
.hero h1 { max-width: 14em; margin-inline: auto; }
.soon { margin-top: 12px !important; font-size: 15px; }

/* Official store badges. Google's PNG has built-in padding, so it is sized up and pulled in to match Apple's height. */
.stores { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 16px; margin-top: 32px; }
.stores a { display: inline-flex; border-radius: 10px; }
.stores img { display: block; }
.badge-apple img { height: 52px; width: auto; }
.badge-google img { height: 77px; width: auto; margin: -12.5px; }

/* Phone preview card */
.preview { margin: 16px auto 48px; max-width: 340px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px 20px; }
.ring { display: block; margin: 0 auto 20px; width: 180px; height: 180px; }
.ring .track { stroke: var(--divider); }
.ring .progress { stroke: var(--primary); }
.ring .num { fill: var(--on-surface); font: 700 40px var(--font); letter-spacing: -0.5px; }
.ring .lbl { fill: var(--text-secondary); font: 500 13px var(--font); }
.macro { margin-top: 12px; }
.macro-head { display: flex; justify-content: space-between; font-size: 13px; font-weight: 500; margin-bottom: 4px; }
.macro-head span:last-child { color: var(--text-secondary); }
.bar { height: 8px; border-radius: var(--radius-full); background: var(--divider); overflow: hidden; }
.bar i { display: block; height: 100%; border-radius: inherit; }

/* Features */
.features { display: grid; gap: 12px; margin-bottom: 48px; }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 16px; }
.card h3 { margin: 0 0 4px; font-size: 17px; font-weight: 600; }
.card p { margin: 0; color: var(--text-secondary); font-size: 15px; line-height: 1.4; }

/* Document pages */
.doc { padding-top: 24px; padding-bottom: 48px; }
.doc h1 { font-size: 34px; line-height: 1.2; letter-spacing: -0.4px; margin: 0 0 8px; }
.doc .meta { color: var(--text-secondary); font-size: 15px; margin: 0 0 32px; }
.doc h2 { font-size: 22px; line-height: 1.3; letter-spacing: -0.2px; margin: 40px 0 8px; }
.doc h3 { font-size: 17px; margin: 24px 0 4px; }
.doc p, .doc li { color: var(--on-surface); }
.doc ul, .doc ol { padding-inline-start: 24px; }
.doc li { margin: 4px 0; }
.doc table { width: 100%; border-collapse: collapse; font-size: 15px; margin: 12px 0; }
.doc th, .doc td { text-align: start; padding: 10px 8px; border-bottom: 1px solid var(--divider); vertical-align: top; }
.doc th { font-weight: 600; }
.table-scroll { overflow-x: auto; }
.callout { background: var(--primary-soft); border-radius: var(--radius-md); padding: 16px; margin: 24px 0; }
.callout p { margin: 0; }
.todo { background: #FFF3C4; color: #5A4300; padding: 0 4px; border-radius: 4px; }

.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 24px; border-radius: var(--radius-full); background: var(--primary); color: var(--on-primary); font-weight: 600; font-size: 17px; text-decoration: none; }
.btn:hover { opacity: 0.9; }

details { border-bottom: 1px solid var(--divider); padding: 12px 0; }
summary { cursor: pointer; font-weight: 600; min-height: 32px; display: flex; align-items: center; }
details p { margin: 8px 0 4px; color: var(--text-secondary); }

/* Footer */
.site-footer { border-top: 1px solid var(--divider); padding: 24px 0 40px; color: var(--text-secondary); font-size: 13px; }
.site-footer .wrap { display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.site-footer a { color: var(--text-secondary); }

.section-title { text-align: center; font-size: 28px; line-height: 1.2; letter-spacing: -0.3px; margin: 0 0 24px; }
@media (min-width: 600px) { .features { grid-template-columns: 1fr 1fr; } }
.cta { text-align: center; padding: 16px 0 64px; }
.cta h2 { font-size: 28px; line-height: 1.2; letter-spacing: -0.3px; margin: 0; }
.cta .stores { margin-top: 24px; }

.steps { list-style: none; padding: 0; margin: 0 0 48px; display: grid; gap: 12px; }
@media (min-width: 600px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step-num { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--radius-full); background: var(--primary-soft); color: var(--primary); font-weight: 700; font-size: 15px; margin-bottom: 12px; }