/* ============================================================
   Compound — Design Tokens
   Source of truth: hieuhuynhluu/Compound (constants/theme.ts,
   tailwind.config.js, DESIGN.md).
   The app is dark-only. Light-mode is intentionally not
   defined: generic light defaults read as off-brand.
   ============================================================ */

/* Manrope — variable font, served locally from fonts/.
   Single weight axis (400–800). Body 400, section/title 600, hero 700. */
@font-face {
  font-family: "Manrope";
  src: url("fonts/Manrope-VariableFont_wght.ttf") format("truetype-variations"),
       url("fonts/Manrope-VariableFont_wght.ttf") format("truetype");
  /* path is project-root-relative; tokens.css lives at root */
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
/* No italic font is used. Manrope ships roman-only; emphasis is carried
   by weight (SemiBold/Bold) + lavender color, never italic. */

:root {
  /* ---------- Core palette ---------- */
  --background: #0e0e0e;
  --primary: #e1cbff;            /* lavender — the "luminous purple" */
  --primary-container: #d5bbfa;  /* deeper lavender — gradient end */
  --secondary: #ffb5a0;          /* warm "solar" peach */
  --secondary-container: #d4917e;
  --tertiary: #343877;           /* deep indigo accent */
  --tertiary-secondary: #55252f; /* dark rose */

  /* ---------- Surface hierarchy (stacked dark paper) ---------- */
  --surface: #0e0e0e;
  --surface-container-lowest: #111111;
  --surface-container-low: #131313;
  --surface-container: #191a1a;
  --surface-container-high: #1f2020;
  --surface-bright: #2a2b2b;

  /* ---------- On-surface text ---------- */
  --on-surface: #e7e5e4;          /* off-white. NEVER pure #ffffff */
  --on-surface-variant: #acabaa;  /* muted body / metadata */
  --on-primary: #543f74;          /* on lavender CTAs */
  --on-secondary-container: #fff0eb;

  /* ---------- Outline / "ghost border" ---------- */
  --outline-variant: #484848;
  /* Apply at 20% opacity only when accessibility requires it */
  --ghost-border: rgba(72, 72, 72, 0.2);

  /* ---------- Semantic ---------- */
  --error: #f87171;
  --success: #5eead4;
  --warning: #fbbf24;
  --accent-gold: #f5c662;

  /* Nutrition-accuracy bands (PRD) */
  --on-target: #5eead4;          /* within 10% */
  --slightly-off: #fbbf24;       /* 10–20% */
  --significantly-off: #ffb5a0;  /* >20% */

  /* ---------- Signature gradients ---------- */
  --gradient-primary: linear-gradient(90deg, #e1cbff 0%, #d5bbfa 100%);
  --gradient-primary-diagonal: linear-gradient(135deg, #e1cbff 0%, #d5bbfa 100%);

  /* ---------- Typography ---------- */
  --font-sans: "Manrope", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Type scale (px). Sentence case only. No uppercase. */
  --type-display:  3.5rem;  /* 56px — hero number, one per screen */
  --type-headline: 1.75rem; /* 28px — screen titles */
  --type-title:    1.375rem;/* 22px — card / sheet / dialog titles */
  --type-title-sm: 1rem;    /* 16px — selection card label */
  --type-section:  0.875rem;/* 14px — muted section header */
  --type-body:     1rem;    /* 16px — default */
  --type-caption:  0.75rem; /* 12px — meta */

  /* Display tracking is the editorial signature */
  --tracking-display: -0.02em;
  --tracking-tight:   -0.01em;
  --tracking-normal:   0em;

  --leading-display: 1.05;
  --leading-tight:   1.2;
  --leading-normal:  1.5;

  /* ---------- Spacing scale ---------- */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 24px;
  --space-2xl: 32px;
  --space-3xl: 48px;
  --space-4xl: 64px;

  /* ---------- Radii ---------- */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* ---------- Elevation: glow, not drop-shadow ---------- */
  /* Ambient lavender glow — used on hover / floating CTAs */
  --shadow-ambient: 0 0 30px rgba(225, 203, 255, 0.10);
  --shadow-ambient-strong: 0 0 60px rgba(225, 203, 255, 0.25);
  /* Solar peach glow — for secondary highlights */
  --shadow-solar: 0 0 60px rgba(255, 181, 160, 0.10);
  /* Inner rim-light on top edge of buttons (1px, surface-bright) */
  --shadow-rim: inset 0 1px 0 rgba(42, 43, 43, 1);

  /* ---------- Glass ---------- */
  --glass-bg: rgba(25, 26, 26, 0.7);  /* surface-container @ 70% */
  --glass-blur: blur(20px);
}

/* ============================================================
   Semantic element styles. Map directly to <Text variant="…">
   in the React Native app. Sentence case across the board.
   ============================================================ */

html, body {
  background: var(--background);
  color: var(--on-surface);
  font-family: var(--font-sans);
  font-size: var(--type-body);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .display {
  font-family: var(--font-sans);
  font-size: var(--type-display);
  font-weight: 700;
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-display);
  color: var(--on-surface);
  margin: 0;
}

h2, .headline {
  font-family: var(--font-sans);
  font-size: var(--type-headline);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  color: var(--on-surface);
  margin: 0;
}

h3, .title {
  font-family: var(--font-sans);
  font-size: var(--type-title);
  font-weight: 600;
  line-height: var(--leading-tight);
  color: var(--on-surface);
  margin: 0;
}

h4, .title-sm {
  font-family: var(--font-sans);
  font-size: var(--type-title-sm);
  font-weight: 600;
  line-height: var(--leading-tight);
  color: var(--on-surface);
  margin: 0;
}

.section {
  /* Muted section header above groups of rows.
     SENTENCE CASE — never uppercase. */
  font-family: var(--font-sans);
  font-size: var(--type-section);
  font-weight: 600;
  color: var(--on-surface-variant);
}

p, .body {
  font-family: var(--font-sans);
  font-size: var(--type-body);
  font-weight: 400;
  color: var(--on-surface);
  margin: 0;
}

.caption {
  font-family: var(--font-sans);
  font-size: var(--type-caption);
  font-weight: 500;
  color: var(--on-surface-variant);
}

/* The emphasis accent. Manrope SemiBold/Bold + lavender — one phrase
   per surface, no italic. Weight + color carry emphasis, never italic. */
.accent {
  font-family: var(--font-sans);
  font-style: normal;
  color: var(--primary);
  font-weight: 700;
  letter-spacing: -0.005em;
}

code, .mono {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

/* The locked CTA: primary gradient pill, full radius. */
.cta-gradient {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 18px 32px;
  border-radius: var(--radius-full);
  background: var(--gradient-primary);
  color: var(--on-primary);
  font-family: var(--font-sans);
  font-size: var(--type-title);
  font-weight: 600;
  border: 0;
  cursor: pointer;
  box-shadow: var(--shadow-ambient);
  transition: box-shadow 200ms ease, opacity 150ms ease;
}
.cta-gradient:hover { box-shadow: var(--shadow-ambient-strong); }
.cta-gradient:disabled { opacity: 0.4; cursor: not-allowed; }