/* Lemon Design System — Colors & Type Tokens
 * Source of truth: mobile-app/constants/theme.ts from getlemonapp/lemon
 * Semantic tokens mirror the React Native `colors` / `typography` / `spacing` / `radius` objects.
 */

:root {
  /* --- Brand --- */
  --lemon-primary: #FFD142;       /* lemon yellow — app tint color, primary buttons, headers */
  --lemon-primary-dark: #E6B800;  /* pressed state for primary buttons */
  --lemon-primary-ink: #1A1A1A;   /* text on primary/yellow backgrounds */

  /* Logo gradient used in wordmark 'o' dot */
  --lemon-logo-grad-start: #FFD656;
  --lemon-logo-grad-end: #FFC205;

  /* --- Surfaces --- */
  --lemon-background: #FFFFFF;
  --lemon-surface: #FFFFFF;
  --lemon-surface-muted: #F5F5F5;  /* card fills, row backgrounds */
  --lemon-border: #E5E5E5;

  /* --- Text --- */
  --lemon-text-primary: #1A1A1A;
  --lemon-text-secondary: #6B6B6B;
  --lemon-text-muted: #9B9B9B;
  --lemon-text-inverse: #FFFFFF;

  /* --- Feedback --- */
  --lemon-success: #2E7D32;
  --lemon-warning: #ED6C02;
  --lemon-danger: #C62828;
  --lemon-info: #0277BD;

  /* Feedback — soft tints for badges, cells, highlight rows */
  --lemon-success-soft: #E8F5E9;
  --lemon-warning-soft: #FFF4E5;
  --lemon-danger-soft: #FFEBEE;

  /* --- Spacing scale (px) --- */
  --lemon-space-xs: 4px;
  --lemon-space-sm: 8px;
  --lemon-space-md: 16px;
  --lemon-space-lg: 24px;
  --lemon-space-xl: 32px;
  --lemon-space-xxl: 48px;

  /* --- Radii --- */
  --lemon-radius-sm: 6px;    /* input sub-elements, slot badges */
  --lemon-radius-md: 12px;   /* inputs, cards, buttons, headers */
  --lemon-radius-lg: 20px;   /* rounded-bottom yellow headers */
  --lemon-radius-pill: 999px;/* period badge, Yes/No/N/A pills, toggles */

  /* --- Type stacks ---
   * System stack mirrors React Native defaults (SF Pro on iOS, Roboto on Android).
   * Web surface (existing react web-app) is a vanilla CRA, no custom font —
   * keep the system stack consistent.
   * For marketing surfaces that need a display serif ligature like the logo, use
   * `--lemon-font-display-serif` (Google Fonts fallback: Fraunces is the nearest
   *  match for the custom wordmark curves).
   */
  --lemon-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --lemon-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  --lemon-font-display-serif: "Fraunces", ui-serif, Georgia, "Times New Roman", serif;

  /* --- Type scale (mirrors theme.ts `typography`) --- */
  /* displayLarge */
  --lemon-display-lg-size: 32px;
  --lemon-display-lg-line: 38px;
  --lemon-display-lg-weight: 700;
  /* displayMedium */
  --lemon-display-md-size: 24px;
  --lemon-display-md-line: 30px;
  --lemon-display-md-weight: 700;
  /* titleLarge */
  --lemon-title-lg-size: 20px;
  --lemon-title-lg-line: 26px;
  --lemon-title-lg-weight: 600;
  /* titleMedium */
  --lemon-title-md-size: 16px;
  --lemon-title-md-line: 22px;
  --lemon-title-md-weight: 600;
  /* bodyLarge */
  --lemon-body-lg-size: 16px;
  --lemon-body-lg-line: 22px;
  --lemon-body-lg-weight: 400;
  /* bodyMedium */
  --lemon-body-md-size: 14px;
  --lemon-body-md-line: 20px;
  --lemon-body-md-weight: 400;
  /* caption */
  --lemon-caption-size: 12px;
  --lemon-caption-line: 16px;
  --lemon-caption-weight: 400;
  /* button */
  --lemon-button-size: 16px;
  --lemon-button-line: 22px;
  --lemon-button-weight: 600;

  /* Section label — uppercase tracked caption used throughout Settings */
  --lemon-eyebrow-size: 12px;
  --lemon-eyebrow-weight: 700;
  --lemon-eyebrow-tracking: 0.5px;

  /* --- Semantic roles --- */
  --fg-primary: var(--lemon-text-primary);
  --fg-secondary: var(--lemon-text-secondary);
  --fg-muted: var(--lemon-text-muted);
  --fg-inverse: var(--lemon-text-inverse);
  --bg: var(--lemon-background);
  --bg-muted: var(--lemon-surface-muted);
  --border: var(--lemon-border);
}

/* --- Semantic utility classes ---
 * Use these in HTML artifacts to stay on-system without repeating the raw values.
 */

.lemon-h1 {
  font-family: var(--lemon-font-sans);
  font-size: var(--lemon-display-lg-size);
  line-height: var(--lemon-display-lg-line);
  font-weight: var(--lemon-display-lg-weight);
  color: var(--fg-primary);
  letter-spacing: -0.01em;
}
.lemon-h2 {
  font-family: var(--lemon-font-sans);
  font-size: var(--lemon-display-md-size);
  line-height: var(--lemon-display-md-line);
  font-weight: var(--lemon-display-md-weight);
  color: var(--fg-primary);
}
.lemon-h3 {
  font-family: var(--lemon-font-sans);
  font-size: var(--lemon-title-lg-size);
  line-height: var(--lemon-title-lg-line);
  font-weight: var(--lemon-title-lg-weight);
  color: var(--fg-primary);
}
.lemon-h4 {
  font-family: var(--lemon-font-sans);
  font-size: var(--lemon-title-md-size);
  line-height: var(--lemon-title-md-line);
  font-weight: var(--lemon-title-md-weight);
  color: var(--fg-primary);
}
.lemon-body {
  font-family: var(--lemon-font-sans);
  font-size: var(--lemon-body-lg-size);
  line-height: var(--lemon-body-lg-line);
  font-weight: var(--lemon-body-lg-weight);
  color: var(--fg-primary);
}
.lemon-body-sm {
  font-family: var(--lemon-font-sans);
  font-size: var(--lemon-body-md-size);
  line-height: var(--lemon-body-md-line);
  font-weight: var(--lemon-body-md-weight);
  color: var(--fg-secondary);
}
.lemon-caption {
  font-family: var(--lemon-font-sans);
  font-size: var(--lemon-caption-size);
  line-height: var(--lemon-caption-line);
  font-weight: var(--lemon-caption-weight);
  color: var(--fg-muted);
}
.lemon-eyebrow {
  font-family: var(--lemon-font-sans);
  font-size: var(--lemon-eyebrow-size);
  font-weight: var(--lemon-eyebrow-weight);
  letter-spacing: var(--lemon-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--fg-muted);
}
.lemon-button-text {
  font-family: var(--lemon-font-sans);
  font-size: var(--lemon-button-size);
  line-height: var(--lemon-button-line);
  font-weight: var(--lemon-button-weight);
}
.lemon-wordmark {
  font-family: var(--lemon-font-display-serif);
  font-weight: 500;
  font-style: italic;
  letter-spacing: -0.02em;
}

/* Opinionated element resets: apply `.lemon` on a root element to get defaults. */
.lemon {
  font-family: var(--lemon-font-sans);
  font-size: var(--lemon-body-lg-size);
  line-height: var(--lemon-body-lg-line);
  color: var(--fg-primary);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.lemon h1 { font-size: var(--lemon-display-lg-size); line-height: var(--lemon-display-lg-line); font-weight: 700; margin: 0; }
.lemon h2 { font-size: var(--lemon-display-md-size); line-height: var(--lemon-display-md-line); font-weight: 700; margin: 0; }
.lemon h3 { font-size: var(--lemon-title-lg-size); line-height: var(--lemon-title-lg-line); font-weight: 600; margin: 0; }
.lemon h4 { font-size: var(--lemon-title-md-size); line-height: var(--lemon-title-md-line); font-weight: 600; margin: 0; }
.lemon p  { margin: 0; }