/* ============================================================
   PeptidesAI — Colors & Type Tokens
   Built from real app screenshots (April 2026).
   Dark theme is default. Add data-theme="light" for light.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&display=swap');

:root {
  /* ---------- Brand mint (sampled from app) ---------- */
  --mint-50:  #DEFBF3;
  --mint-100: #B6F4E2;
  --mint-200: #7DEACB;
  --mint-300: #3CDFB3;
  --mint-400: #14D4A4;
  --mint-500: #08D8AB;  /* PRIMARY — sampled from "All" pill */
  --mint-600: #07B991;
  --mint-700: #069775;
  --mint-800: #06765A;
  --mint-900: #054F3D;
  --mint-glow: rgba(8, 216, 171, 0.30);

  /* ---------- Secondary accent (purple) ---------- */
  /* sampled from "Next: 4mg" badge & supplies note */
  --violet-300: #A48CF5;
  --violet-400: #8A6FF0;
  --violet-500: #7257E8;
  --violet-soft-bg: rgba(138, 111, 240, 0.10);
  --violet-soft-bd: rgba(138, 111, 240, 0.30);

  /* ---------- Category accent (orange — Healing) ---------- */
  --orange-400: #F2A356;
  --orange-soft-bg: rgba(242, 163, 86, 0.12);
  --orange-soft-bd: rgba(242, 163, 86, 0.32);

  /* ---------- Neutrals ---------- */
  --neutral-0:    #FFFFFF;
  --neutral-50:   #F5F7F8;
  --neutral-100:  #ECEFF1;
  --neutral-200:  #D6DBDE;
  --neutral-300:  #9DA5A8;
  --neutral-400:  #6E7679;
  --neutral-500:  #4A5154;
  --neutral-600:  #2A2E30;
  --neutral-700:  #1A1D1E;
  --neutral-800:  #121415;   /* card bg dark */
  --neutral-900:  #0A0C0D;   /* page bg dark */
  --neutral-950:  #050607;

  /* ---------- Semantic — DARK (default) ---------- */
  --bg:          var(--neutral-900);
  --bg-elev-1:   #14171A;     /* card bg, sampled from screenshots */
  --bg-elev-2:   #1F2426;
  --bg-overlay:  rgba(10, 12, 13, 0.72);

  --fg:          #FFFFFF;
  --fg-muted:    #A4ABAE;
  --fg-faint:    #6E7679;
  --fg-inverse:  #0A0C0D;

  --accent:           var(--mint-500);
  --accent-hover:     var(--mint-400);
  --accent-pressed:   var(--mint-600);
  --accent-fg:        #0A0C0D;
  --accent-soft-bg:   rgba(8, 216, 171, 0.12);
  --accent-soft-bd:   rgba(8, 216, 171, 0.30);

  --border:           rgba(255, 255, 255, 0.08);
  --border-strong:    rgba(255, 255, 255, 0.16);
  --border-focus:     var(--mint-500);

  --success: var(--mint-500);
  --warning: #F2A356;
  --danger:  #FF6B6B;
  --info:    var(--violet-400);

  /* ---------- Shadows ---------- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.20);
  --shadow-md: 0 1px 2px rgba(0, 0, 0, 0.16), 0 4px 12px rgba(0, 0, 0, 0.24);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.36);
  --shadow-glow: 0 0 32px var(--mint-glow);

  /* ---------- Radii ---------- */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* ---------- Spacing (4pt) ---------- */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px;
  --space-4: 16px; --space-5: 20px; --space-6: 24px;
  --space-7: 32px; --space-8: 40px; --space-9: 48px;
  --space-10: 64px; --space-11: 96px; --space-12: 128px;

  /* ---------- Type families ----------
     App: SF Pro (system).
     Web display: Fraunces (refined display serif) for hero/headlines.
     Web body: Inter (SF Pro Web fallback). */
  --font-display: 'Fraunces', 'New Spirit', Georgia, serif;
  --font-app:     -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Inter', system-ui, sans-serif;
  --font-text:    -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', system-ui, sans-serif;

  /* ---------- Type scale ---------- */
  --fs-display:  72px;   --lh-display:  1.02;  --lt-display:  -0.025em;
  --fs-h1:       48px;   --lh-h1:       1.08;  --lt-h1:       -0.022em;
  --fs-h2:       34px;   --lh-h2:       1.15;  --lt-h2:       -0.018em;
  --fs-h3:       24px;   --lh-h3:       1.25;  --lt-h3:       -0.012em;
  --fs-h4:       20px;   --lh-h4:       1.3;   --lt-h4:       -0.008em;
  --fs-body-lg:  18px;   --lh-body-lg:  1.55;
  --fs-body:     16px;   --lh-body:     1.5;
  --fs-body-sm:  14px;   --lh-body-sm:  1.45;
  --fs-caption:  12px;   --lh-caption:  1.4;
  --fs-data-xl:  44px;
  --fs-data-lg:  32px;
  --fs-data:     17px;

  /* ---------- Motion ---------- */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:    150ms;
  --dur-base:    200ms;
  --dur-slow:    320ms;
}

/* ---------- Light theme ---------- */
[data-theme="light"] {
  --bg:          #F2F4F4;
  --bg-elev-1:   #FFFFFF;
  --bg-elev-2:   #ECEFF1;
  --bg-overlay:  rgba(255, 255, 255, 0.85);

  --fg:          #0A0C0D;
  --fg-muted:    #4A5154;
  --fg-faint:    #6E7679;
  --fg-inverse:  #FFFFFF;

  --accent:           #08C699;
  --accent-hover:     #07B28B;
  --accent-pressed:   #069875;
  --accent-fg:        #FFFFFF;
  --accent-soft-bg:   rgba(8, 198, 153, 0.10);
  --accent-soft-bd:   rgba(8, 198, 153, 0.28);

  --border:        rgba(10, 12, 13, 0.08);
  --border-strong: rgba(10, 12, 13, 0.16);

  --shadow-sm: 0 1px 2px rgba(10,12,13,0.04);
  --shadow-md: 0 1px 2px rgba(10,12,13,0.04), 0 4px 12px rgba(10,12,13,0.06);
  --shadow-lg: 0 8px 24px rgba(10,12,13,0.10);
}

html, body {
  font-family: var(--font-text);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* App-style headings (heavy sans, no serif) — used in iOS UI kit */
.t-app-h1 { font-family: var(--font-app); font-size: 36px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.t-app-h2 { font-family: var(--font-app); font-size: 24px; font-weight: 700; letter-spacing: -0.012em; }
.t-app-h3 { font-family: var(--font-app); font-size: 18px; font-weight: 600; }
.t-app-num { font-family: var(--font-app); font-size: 32px; font-weight: 700; letter-spacing: -0.012em; }

/* Web display (serif) — used on marketing site only */
.t-display { font-family: var(--font-display); font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: var(--lt-display); font-weight: 600; }
h1, .t-h1 { font-family: var(--font-display); font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--lt-h1); font-weight: 600; margin: 0; }
h2, .t-h2 { font-family: var(--font-display); font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--lt-h2); font-weight: 600; margin: 0; }
h3, .t-h3 { font-family: var(--font-text); font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--lt-h3); font-weight: 600; margin: 0; }
h4, .t-h4 { font-family: var(--font-text); font-size: var(--fs-h4); line-height: var(--lh-h4); letter-spacing: var(--lt-h4); font-weight: 600; margin: 0; }
p, .t-body { font-size: var(--fs-body); line-height: var(--lh-body); margin: 0; }
.t-body-lg { font-size: var(--fs-body-lg); line-height: var(--lh-body-lg); }
.t-body-sm { font-size: var(--fs-body-sm); line-height: var(--lh-body-sm); }
.t-caption { font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--fg-muted); }
.t-eyebrow { font-size: var(--fs-caption); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; color: var(--accent); }
.t-muted  { color: var(--fg-muted); }
.t-faint  { color: var(--fg-faint); }
.t-accent { color: var(--accent); }
.t-violet { color: var(--violet-400); }