/* =========================================================================
   Wingman Focus — Design Tokens
   Source: Flutter codebase tony-yao-warenetic/wingman_focus
   ========================================================================= */

/* Inter via Google Fonts — matches `google_fonts: ^6.2.1` Inter usage */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap");

/* Material Symbols Rounded — variable font (axis ranges = ligatures enabled) */
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=swap");

:root {
  /* ---------- Brand color: primary + accent ----------------------------- */
  --wm-primary:        #0E5FA2;   /* deep blue — primary CTA, wingman tab */
  --wm-primary-strong: #094876;
  --wm-primary-soft:   #DEEBF6;
  --wm-primary-tint:   rgba(14, 95, 162, 0.10);

  /* Onboarding accent palette — six rotating accents */
  --wm-accent-welcome:  #5B7CFA;  /* cornflower */
  --wm-accent-screen:   #3E8BFF;  /* sky-blue */
  --wm-accent-day:      #7B5CFF;  /* lavender */
  --wm-accent-task:     #1F6FEB;  /* deep cobalt */
  --wm-accent-self:     #F59E0B;  /* amber (warm pop — used for streaks/rewards) */
  --wm-accent-more:     #0EA5E9;  /* cyan */
  --wm-done-gradient-end: #7B5CFF;

  /* "Let's Go" gradient (used on done CTA) */
  --wm-gradient-primary: linear-gradient(135deg, #5B7CFA 0%, #3E8BFF 100%);
  --wm-gradient-done:    linear-gradient(135deg, #5B7CFA 0%, #7B5CFF 100%);
  --wm-gradient-hero:    linear-gradient(135deg, #0E5FA2 0%, rgba(14,95,162,0.75) 50%, rgba(123,92,255,0.45) 100%);

  /* ---------- Neutrals (Slate scale) ----------------------------------- */
  --wm-bg:        #F8FAFC;        /* Slate 50  — app canvas */
  --wm-surface:   #FFFFFF;        /* card body */
  --wm-slate-50:  #F8FAFC;
  --wm-slate-100: #F1F5F9;        /* setup-icon bg, dividers, chip rest */
  --wm-slate-200: #E2E8F0;
  --wm-slate-300: #CBD5E1;        /* inactive dot, hairline */
  --wm-slate-400: #94A3B8;        /* skip color, placeholder */
  --wm-slate-500: #64748B;        /* muted text */
  --wm-slate-700: #334155;
  --wm-slate-800: #1E293B;        /* primary text */
  --wm-slate-900: #0F172A;        /* hero title color */

  --wm-fg:        #1E293B;        /* alias: foreground primary */
  --wm-fg-muted:  #64748B;        /* alias: foreground muted */
  --wm-fg-faint:  #94A3B8;        /* alias: foreground faint */

  /* ---------- Semantic ------------------------------------------------- */
  --wm-success:        #10B981;    /* emerald 500 */
  --wm-success-strong: #059669;
  --wm-success-soft:   #D1FAE5;    /* emerald 100 */

  --wm-warning:        #F59E0B;    /* amber 500 */
  --wm-warning-soft:   #FEF3C7;    /* amber 100 */

  --wm-danger:         #B91C1C;    /* red 700 */
  --wm-danger-soft:    #FEE2E2;    /* red 100 */

  --wm-info:           #0EA5E9;    /* sky 500 */
  --wm-info-soft:      #E0F2FE;    /* sky 100 */

  /* ---------- Type ----------------------------------------------------- */
  --wm-font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --wm-font-icon: "Material Symbols Rounded";

  /* type scale (px) */
  --wm-fs-12: 12px;
  --wm-fs-13: 13px;
  --wm-fs-14: 14px;
  --wm-fs-15: 15px;
  --wm-fs-16: 16px;
  --wm-fs-17: 17px;
  --wm-fs-18: 18px;
  --wm-fs-20: 20px;
  --wm-fs-22: 22px;
  --wm-fs-28: 28px;
  --wm-fs-32: 32px;
  --wm-fs-40: 40px;

  /* ---------- Spacing (loose 4-base scale) ----------------------------- */
  --wm-sp-1: 4px;
  --wm-sp-2: 8px;
  --wm-sp-3: 12px;
  --wm-sp-4: 16px;
  --wm-sp-5: 20px;
  --wm-sp-6: 24px;
  --wm-sp-7: 28px;
  --wm-sp-8: 32px;
  --wm-sp-10: 40px;
  --wm-sp-12: 48px;
  --wm-sp-14: 56px;

  /* ---------- Radius --------------------------------------------------- */
  --wm-r-sm:    8px;
  --wm-r-md:    12px;
  --wm-r-lg:    16px;
  --wm-r-xl:    20px;
  --wm-r-2xl:   24px;
  --wm-r-pill:  999px;
  --wm-r-bottom-nav: 28px;

  /* ---------- Elevation ------------------------------------------------ */
  --wm-shadow-card:     0 4px 10px rgba(0, 0, 0, 0.02);
  --wm-shadow-raised:   0 4px 20px rgba(0, 0, 0, 0.03);
  --wm-shadow-floating: 0 8px 24px rgba(0, 0, 0, 0.08);
  --wm-shadow-glow-primary: 0 8px 18px rgba(91, 124, 250, 0.40);
  --wm-shadow-glow-success: 0 8px 18px rgba(16, 185, 129, 0.30);
  --wm-shadow-cta:      0 8px 16px rgba(14, 95, 162, 0.40);

  /* radial glow used behind hero illustrations */
  --wm-halo-welcome: radial-gradient(circle, rgba(91,124,250,0.28) 0%, rgba(91,124,250,0) 70%);
  --wm-halo-task:    radial-gradient(circle, rgba(31,111,235,0.28) 0%, rgba(31,111,235,0) 70%);

  /* ---------- Borders -------------------------------------------------- */
  --wm-border:       rgba(0, 0, 0, 0.05);
  --wm-border-soft:  rgba(0, 0, 0, 0.02);
  --wm-border-ring:  rgba(14, 95, 162, 0.30);

  /* ---------- Motion --------------------------------------------------- */
  --wm-dur-fast:   180ms;
  --wm-dur-base:   220ms;
  --wm-dur-slow:   320ms;
  --wm-ease-out:   cubic-bezier(0.16, 1, 0.3, 1);    /* easeOutCubic-ish */
  --wm-ease-in:    cubic-bezier(0.7, 0, 0.84, 0);    /* easeInCubic-ish */
  --wm-ease-onboarding: cubic-bezier(0.95, 0, 0.20, 1.00); /* fastLinearToSlowEaseIn */
}

/* =========================================================================
   Semantic type styles
   ========================================================================= */
html, body {
  font-family: var(--wm-font-sans);
  color: var(--wm-fg);
  background: var(--wm-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv11", "ss01";
}

/* Hero / display title — onboarding screens */
.wm-display {
  font-size: var(--wm-fs-32);
  font-weight: 800;
  letter-spacing: -0.5px;
  line-height: 1.15;
  color: var(--wm-slate-900);
}

/* Headline — home welcome */
.wm-h1 {
  font-size: var(--wm-fs-28);
  font-weight: 800;
  letter-spacing: -0.4px;
  line-height: 1.2;
  color: var(--wm-fg);
}

/* Section / page heading */
.wm-h2 {
  font-size: var(--wm-fs-20);
  font-weight: 700;
  letter-spacing: -0.3px;
  color: var(--wm-fg);
}

/* Card title (setup card, etc.) */
.wm-h3 {
  font-size: var(--wm-fs-17);
  font-weight: 700;
  color: var(--wm-fg);
}

/* Section header in lists */
.wm-h4 {
  font-size: var(--wm-fs-16);
  font-weight: 800;
  color: var(--wm-fg);
}

/* Body */
.wm-body {
  font-size: var(--wm-fs-16);
  font-weight: 400;
  line-height: 1.5;
  color: var(--wm-fg-muted);
}

/* Body small (card descriptions) */
.wm-body-sm {
  font-size: var(--wm-fs-14);
  font-weight: 400;
  line-height: 1.5;
  color: var(--wm-fg-muted);
}

/* Caption */
.wm-caption {
  font-size: var(--wm-fs-13);
  font-weight: 500;
  color: var(--wm-fg-muted);
}

/* Eyebrow — onboarding marketing tags */
.wm-eyebrow {
  font-size: var(--wm-fs-12);
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
}

/* Button label */
.wm-btn-label {
  font-size: var(--wm-fs-15);
  font-weight: 700;
  letter-spacing: 0.2px;
}

/* Pill / badge */
.wm-pill {
  font-size: var(--wm-fs-12);
  font-weight: 600;
}

/* Tagline */
.wm-tagline {
  font-size: var(--wm-fs-12);
  font-weight: 500;
  color: var(--wm-fg-faint);
  letter-spacing: 0.2px;
}

/* Material Symbols helper */
.wm-icon {
  font-family: var(--wm-font-icon);
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "liga";
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
}
.wm-icon.filled {
  font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 24;
}