/* We Need Us — Colors & Type
 * Source of truth: wnu-app (React/Tailwind) + wnu-mobile design spec
 * Brand tone: calm, supportive, soft purples/indigos on off-white
 */

/* ---------- Typography ---------- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  /* ---- Type scale ---- */
  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
               'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', sans-serif;
  --font-display: 'Inter', var(--font-sans);

  --fs-12: 12px; --fs-13: 13px; --fs-14: 14px; --fs-16: 16px;
  --fs-18: 18px; --fs-20: 20px; --fs-24: 24px; --fs-28: 28px;
  --fs-32: 32px; --fs-36: 36px;

  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;
  --lh-tight: 1.2; --lh-snug: 1.4; --lh-normal: 1.5; --lh-relaxed: 1.625;
  --tracking-caps: 0.08em;

  /* ---- Brand palette ---- */
  --brand-blue:        #798bfe;   /* primary — buttons, active nav, accents */
  --brand-blue-hover:  #6a7cfc;
  --brand-blue-light:  #818cf8;   /* indigo-400, auth flow */
  --brand-blue-bg:     #F1F5FF;   /* soft tint background */
  --brand-blue-ring:   rgba(121,139,254,0.20);

  --purple:            #8B5CF6;
  --purple-dark:       #7C3AED;
  --purple-50:         #F5F3FF;
  --purple-100:        #EDE9FE;
  --purple-200:        #DDD6FE;

  --link-indigo:       #4f46e5;

  /* ---- Neutrals (foreground/background) ---- */
  --fg-1:  #111827;    /* strongest — headings */
  --fg-2:  #1f2937;    /* body heading */
  --fg-3:  #374151;    /* body copy */
  --fg-4:  #6b7280;    /* secondary */
  --fg-5:  #9ca3af;    /* muted, placeholders */

  --bg-0:  #ffffff;    /* card */
  --bg-1:  #f9fafb;    /* app background */
  --bg-2:  #f3f4f6;    /* chips, hover */
  --bg-3:  #e5e7eb;    /* borders */

  --border:            #e5e7eb;
  --border-soft:       #f3f4f6;

  /* ---- Semantic ---- */
  --success:     #22c55e;
  --success-bg:  #ECFDF5;
  --danger:      #ef4444;
  --danger-bg:   #FEF2F2;
  --warning:     #f97316;  /* unread / notif dot */
  --warning-bg:  #FFF7ED;
  --info:        #0EA5E9;
  --info-bg:     #E0F2FE;

  /* ---- Community banner tints (from data) ---- */
  --tint-hope:     #E6F2FF;
  --tint-bipolar:  #FFF0F5;
  --tint-adhd:     #F0FFF4;
  --tint-anxiety:  #FFF5F5;
  --tint-trauma:   #F0F4FF;
  --tint-ocd:      #F3F0FF;
  --tint-eating:   #FFFBEB;
  --tint-recovery: #ECFDF5;

  /* ---- Radii ---- */
  --radius-sm:  6px;
  --radius-md:  8px;     /* inputs, buttons */
  --radius-lg:  12px;    /* cards */
  --radius-xl:  16px;
  --radius-2xl: 24px;
  --radius-32:  32px;    /* auth card (distinctive) */
  --radius-pill: 9999px;

  /* ---- Shadow ---- */
  --shadow-xs: 0 1px 2px rgba(16,24,40,0.05);
  --shadow-sm: 0 1px 3px rgba(16,24,40,0.06), 0 1px 2px rgba(16,24,40,0.04);
  --shadow-md: 0 4px 8px -2px rgba(16,24,40,0.08), 0 2px 4px -2px rgba(16,24,40,0.04);
  --shadow-lg: 0 12px 24px -6px rgba(16,24,40,0.10), 0 4px 8px -4px rgba(16,24,40,0.06);
  --shadow-xl: 0 24px 48px -12px rgba(16,24,40,0.18);
  --shadow-focus: 0 0 0 3px var(--brand-blue-ring);

  /* ---- Spacing ---- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px;

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-fast: 150ms;
  --dur-med:  300ms;
  --dur-slow: 500ms;
}

/* ---------- Semantic element styles ---------- */
html { font-family: var(--font-sans); color: var(--fg-2); background: var(--bg-1); }
body { font-size: var(--fs-16); line-height: var(--lh-normal); -webkit-font-smoothing: antialiased; }

h1, .h1 { font-size: var(--fs-36); font-weight: var(--fw-bold); line-height: var(--lh-tight); color: var(--fg-1); letter-spacing: -0.01em; }
h2, .h2 { font-size: var(--fs-28); font-weight: var(--fw-bold); line-height: var(--lh-tight); color: var(--fg-1); }
h3, .h3 { font-size: var(--fs-20); font-weight: var(--fw-semibold); line-height: var(--lh-snug); color: var(--fg-1); }
h4, .h4 { font-size: var(--fs-18); font-weight: var(--fw-semibold); line-height: var(--lh-snug); color: var(--fg-2); }
.eyebrow { font-size: var(--fs-14); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--fg-2); }

p, .body { font-size: var(--fs-16); line-height: var(--lh-normal); color: var(--fg-3); }
.body-sm { font-size: var(--fs-14); line-height: var(--lh-snug); color: var(--fg-3); }
.caption { font-size: var(--fs-12); line-height: var(--lh-snug); color: var(--fg-4); }
.label-caps { font-size: var(--fs-12); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--fg-4); }

a { color: var(--link-indigo); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }

code, .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.95em; background: var(--bg-2); padding: 2px 6px; border-radius: var(--radius-sm); }