/* ============================================================
   NuBē Design System — Colors & Typography
   ============================================================
   Brand mark: blue wordmark + coral macron/arc.
   Voice: clean, scientific, accessible. Lots of white space.
   ============================================================ */

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

:root {
  /* ---------- Brand core ---------- */
  --nube-blue: #1A6FA8;          /* primary brand — wordmark, primary CTA */
  --nube-coral: #E8603A;         /* accent — arc, secondary CTA, highlights */
  --nube-white: #FFFFFF;

  /* ---------- Brand tints (surfaces) ---------- */
  --nube-blue-surface: #E6F1FB;  /* soft blue surface */
  --nube-coral-surface: #FAEEE9; /* soft coral surface */

  /* ---------- Blue scale ---------- */
  --blue-50:  #F2F8FD;
  --blue-100: #E6F1FB;           /* alias of nube-blue-surface */
  --blue-200: #C2DDF2;
  --blue-300: #8FBEE3;
  --blue-400: #4F95C8;
  --blue-500: #1A6FA8;           /* alias of nube-blue */
  --blue-600: #155A89;
  --blue-700: #11476C;
  --blue-800: #0C3450;
  --blue-900: #082435;

  /* ---------- Coral scale ---------- */
  --coral-50:  #FDF6F3;
  --coral-100: #FAEEE9;          /* alias of nube-coral-surface */
  --coral-200: #F5D2C5;
  --coral-300: #EFAE97;
  --coral-400: #EC8865;
  --coral-500: #E8603A;          /* alias of nube-coral */
  --coral-600: #C84E2C;
  --coral-700: #9F3D22;
  --coral-800: #732C18;
  --coral-900: #4A1C0F;

  /* ---------- Neutrals (cool, slightly blue-leaning) ---------- */
  --gray-0:   #FFFFFF;
  --gray-50:  #FAFBFC;
  --gray-100: #F4F6F8;
  --gray-200: #E7EBEF;
  --gray-300: #D2D8DE;
  --gray-400: #A8B1B9;
  --gray-500: #7A848D;
  --gray-600: #545D66;
  --gray-700: #3A434B;
  --gray-800: #232A30;
  --gray-900: #11171C;

  /* ---------- Semantic foreground ---------- */
  --fg-1: var(--gray-900);       /* primary text */
  --fg-2: var(--gray-700);       /* secondary text */
  --fg-3: var(--gray-500);       /* tertiary / captions */
  --fg-muted: var(--gray-400);   /* placeholders, dividers */
  --fg-on-brand: #FFFFFF;        /* text on blue/coral */
  --fg-link: var(--nube-blue);

  /* ---------- Semantic backgrounds ---------- */
  --bg-page: #FFFFFF;
  --bg-subtle: var(--gray-50);
  --bg-muted: var(--gray-100);
  --bg-card: #FFFFFF;
  --bg-brand: var(--nube-blue);
  --bg-brand-soft: var(--blue-100);
  --bg-accent: var(--nube-coral);
  --bg-accent-soft: var(--coral-100);

  /* ---------- Borders ---------- */
  --border-subtle: var(--gray-200);
  --border-default: var(--gray-300);
  --border-strong: var(--gray-500);
  --border-brand: var(--nube-blue);

  /* ---------- Status (kept tonally aligned with brand) ---------- */
  --success-50:  #ECF7F0;
  --success-500: #2E8B57;
  --success-700: #1F5F3C;
  --warning-50:  #FFF6E6;
  --warning-500: #D98B1A;
  --warning-700: #8A5610;
  --danger-50:   #FBEBE7;
  --danger-500:  #C8412A;        /* darker coral — works as error */
  --danger-700:  #8C2A1A;
  --info-50:     #E6F1FB;
  --info-500:    #1A6FA8;        /* same as brand */

  /* ---------- Shadows (very subtle — minimalist brand) ---------- */
  --shadow-xs: 0 1px 2px rgba(17, 23, 28, 0.04);
  --shadow-sm: 0 1px 3px rgba(17, 23, 28, 0.06), 0 1px 2px rgba(17, 23, 28, 0.04);
  --shadow-md: 0 4px 12px rgba(17, 23, 28, 0.06), 0 2px 4px rgba(17, 23, 28, 0.04);
  --shadow-lg: 0 12px 32px rgba(17, 23, 28, 0.08), 0 4px 8px rgba(17, 23, 28, 0.04);
  --shadow-brand: 0 8px 24px rgba(26, 111, 168, 0.18);

  /* ---------- Radii (pill-forward) ---------- */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;          /* default for buttons/CTAs */

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

  /* ---------- Typography families ----------
     Mulish is used as the closest open-source match to NuBē's wordmark
     (humanist sans, soft terminals). FLAG: confirm with brand team and
     swap in the licensed family if NuBē uses a custom typeface. */
  --font-sans: 'Mulish', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Mulish', system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;

  /* ---------- Type scale (rem-based, 16px root) ---------- */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-md:   18px;
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  30px;
  --text-3xl:  36px;
  --text-4xl:  48px;
  --text-5xl:  60px;
  --text-6xl:  72px;

  /* ---------- Weights (brand uses 400 + 500 primarily) ---------- */
  --weight-light:    300;
  --weight-regular:  400;        /* body */
  --weight-medium:   500;        /* emphasis, labels, CTAs */
  --weight-semibold: 600;        /* sub-headings */
  --weight-bold:     700;        /* display / headlines */

  /* ---------- Line heights ---------- */
  --leading-tight:   1.15;       /* display headlines */
  --leading-snug:    1.3;        /* sub-headings */
  --leading-normal:  1.5;        /* body */
  --leading-relaxed: 1.7;        /* long-form */

  /* ---------- Tracking ---------- */
  --tracking-tight:  -0.02em;    /* large display */
  --tracking-normal: 0;
  --tracking-wide:   0.04em;     /* eyebrows, all-caps labels */

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 320ms;
}

/* ============================================================
   Base elements
   ============================================================ */

html {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: var(--fg-1);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-normal);
  margin: 0;
}

/* ---------- Headings ---------- */
h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--text-5xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  margin: 0;
}

h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  margin: 0;
}

h3, .h3 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  color: var(--fg-1);
  margin: 0;
}

h4, .h4 {
  font-size: var(--text-xl);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
  color: var(--fg-1);
  margin: 0;
}

h5, .h5 {
  font-size: var(--text-md);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
  color: var(--fg-1);
  margin: 0;
}

/* ---------- Body / inline ---------- */
p, .body {
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--fg-2);
  margin: 0;
}

.lead {
  font-size: var(--text-lg);
  line-height: var(--leading-normal);
  color: var(--fg-2);
}

small, .caption {
  font-size: var(--text-sm);
  color: var(--fg-3);
}

.eyebrow {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--nube-blue);
}

a, .link {
  color: var(--fg-link);
  text-decoration: none;
  transition: opacity var(--duration-fast) var(--ease-out);
}
a:hover, .link:hover { opacity: 0.78; text-decoration: underline; }

code, kbd, pre {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

hr {
  border: 0;
  border-top: 1px solid var(--border-subtle);
  margin: var(--space-8) 0;
}