/* Chompanion design tokens — derived from the app's design system */
:root {
  /* Brand teal */
  --color-primary-200: #85FFC7;
  --color-primary-500: #57B99D;
  --color-primary-800: #297373;

  /* Accents */
  --color-accent-orange: #FF8552;
  --color-accent-yellow: #FFD23F;
  --color-accent-red:    #EF476F;

  /* Backgrounds */
  --color-bg-primary:   #1A1A1B;
  --color-bg-secondary: #242425;
  --color-bg-card:      #39393A;
  --color-bg-elevated:  #454546;
  --color-bg-input:     rgba(0,0,0,0.30);

  /* Text */
  --color-text-primary:   #FFFFFF;
  --color-text-secondary: #E6E6E6;
  --color-text-muted:     #909090;
  --color-text-light:     rgba(255,255,255,0.70);
  --color-text-disabled:  rgba(255,255,255,0.40);

  /* Borders */
  --color-border-primary:   rgba(255,255,255,0.12);
  --color-border-secondary: rgba(255,255,255,0.06);
  --color-border-strong:    rgba(255,255,255,0.20);

  /* Semantic */
  --color-success: #57B99D;
  --color-warning: #FF8552;
  --color-error:   #EF476F;

  /* Macros */
  --color-macro-protein: #33C6FF;
  --color-macro-carbs:   #FF8A5B;
  --color-macro-fat:     #F472B6;
  --color-macro-cal:     #57B99D;

  /* Radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;

  /* Shadow */
  --shadow-card:     0 2px 4px rgba(0,0,0,0.10);
  --shadow-elevated: 0 4px 8px rgba(0,0,0,0.15);

  /* Type */
  --font-sans: 'Nunito', system-ui, -apple-system, sans-serif;
  --font-mono: 'Space Mono', ui-monospace, monospace;
}

html, body { background: var(--color-bg-primary); }

body {
  font-family: var(--font-sans);
  color: var(--color-text-primary);
  -webkit-font-smoothing: antialiased;
}

.overline {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}

.hairline { border: 1px solid var(--color-border-secondary); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 16px;
  padding: 14px 22px;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: opacity .15s, background .15s, border-color .15s;
}
.btn:active { transform: scale(0.99); opacity: 0.92; }

.btn-primary { background: var(--color-primary-500); color: #fff; }
.btn-primary:hover { background: #4FAB91; }

.btn-secondary {
  background: rgba(87,185,157,0.12);
  color: var(--color-primary-500);
  border-color: rgba(87,185,157,0.25);
}
.btn-secondary:hover { background: rgba(87,185,157,0.18); }

.btn-ghost {
  background: transparent;
  color: var(--color-text-light);
  border-color: var(--color-border-primary);
}
.btn-ghost:hover { border-color: var(--color-border-strong); color: #fff; }

.btn-sm { font-size: 14px; padding: 10px 16px; border-radius: 10px; }

.card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border-secondary);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}

.input {
  width: 100%;
  background: var(--color-bg-input);
  border: 1px solid var(--color-border-primary);
  color: #fff;
  border-radius: var(--radius-md);
  padding: 12px 14px;
  font-size: 15px;
  font-family: var(--font-sans);
  outline: none;
  transition: border-color .15s;
}
.input::placeholder { color: rgba(255,255,255,0.35); }
.input:focus { border-color: var(--color-primary-500); }

/* Subtle in-page anchors */
html { scroll-behavior: smooth; }

/* Legal / long-form pages */
.prose { color: rgba(255,255,255,0.78); font-size: 16px; line-height: 1.7; }
.prose h1 { font-size: 36px; font-weight: 900; letter-spacing: -0.5px; color: #fff; margin: 0 0 8px; }
.prose h2 { font-size: 22px; font-weight: 800; color: #fff; margin: 36px 0 10px; letter-spacing: -0.2px; }
.prose h3 { font-size: 16px; font-weight: 700; color: #fff; margin: 22px 0 6px; }
.prose p  { margin: 10px 0; }
.prose ul { margin: 10px 0; padding-left: 22px; }
.prose ul li { margin: 6px 0; }
.prose a  { color: #57B99D; }
.prose a:hover { text-decoration: underline; }
.prose strong { color: #fff; font-weight: 700; }
.prose code { font-family: var(--font-mono); font-size: 13px; background: rgba(255,255,255,0.06); border: 1px solid var(--color-border-secondary); padding: 1px 6px; border-radius: 6px; color: #85FFC7; }
.prose .lead { color: rgba(255,255,255,0.65); font-size: 17px; }
.prose .meta { color: rgba(255,255,255,0.45); font-size: 13px; }
.prose .callout { background: var(--color-bg-card); border: 1px solid var(--color-border-secondary); border-radius: var(--radius-md); padding: 16px 18px; margin: 18px 0; font-size: 15px; }

/* Accordion */
details.faq {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border-secondary);
  border-radius: var(--radius-md);
  padding: 16px 20px;
}
details.faq + details.faq { margin-top: 10px; }
details.faq summary {
  cursor: pointer;
  list-style: none;
  font-weight: 700;
  font-size: 16px;
  display: flex; align-items: center; justify-content: space-between;
  color: #fff;
}
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after {
  content: ''; width: 10px; height: 10px;
  border-right: 2px solid rgba(255,255,255,0.5);
  border-bottom: 2px solid rgba(255,255,255,0.5);
  transform: rotate(45deg); transition: transform .2s;
  margin-right: 4px;
}
details.faq[open] summary::after { transform: rotate(-135deg); }
details.faq p {
  margin: 12px 0 0;
  color: var(--color-text-light);
  font-size: 15px; line-height: 1.6;
}