/* Bundled at build time by build/compile.js. Previously five @import statements chained
   from this file, and one of those imported Google Fonts — three serial, render-blocking
   round trips. Edit the files in tokens/, not this output. */
/* ---- tokens/colors.css ---- */
/* Noble Health — Color tokens
 * Brand: navy #203e6a (trust, stability) + green #699d32 (health, vitality)
 * Neutrals are intentionally WARM (caregiving warmth), not clinical cool gray.
 */
:root {
  /* ---- Navy (primary) ---- */
  --navy-50:  #f2f5fa;
  --navy-100: #e4eaf2;
  --navy-200: #c3cfe2;
  --navy-300: #96abcc;
  --navy-400: #6483b3;
  --navy-500: #3a629b;
  --navy-600: #2b4f83;
  --navy-700: #203e6a; /* brand base */
  --navy-800: #1a3153;
  --navy-900: #14263f;

  /* ---- Green (secondary) ---- */
  --green-50:  #f5f9ec;
  --green-100: #ebf3de;
  --green-200: #d5e9c1;
  --green-300: #b6d894;
  --green-400: #97c766;
  --green-500: #7cb340;
  --green-600: #699d32; /* brand base */
  --green-700: #588224;
  --green-800: #45671a;
  --green-900: #2f460f;

  /* ---- Warm neutrals ---- */
  --sand-50:  #faf8f3;
  --sand-100: #f2efe8;
  --sand-200: #e4e0d7;
  --sand-300: #c9c4ba;
  --sand-400: #a8a399;
  --sand-500: #8b867c;
  --sand-600: #6f6b62;
  --sand-700: #55524b;
  --sand-800: #3a3833;
  --sand-900: #26251f;
  --white:    #ffffff;

  /* ---- Semantic status ---- */
  --success-fg:  #45671a;
  --success:     #699d32;
  --success-bg:  #ebf3de;
  --warning-fg:  #8a5a10;
  --warning:     #d99a2b;
  --warning-bg:  #fbf0d9;
  --danger-fg:   #8f2f1c;
  --danger:      #c0492f;
  --danger-bg:   #f8e3dd;
  --info-fg:     #1a3153;
  --info:        #2b4f83;
  --info-bg:     #e4eaf2;

  /* ---- Semantic aliases ---- */
  --brand-primary:       var(--navy-700);
  --brand-primary-hover: var(--navy-800);
  --brand-secondary:       var(--green-600);
  --brand-secondary-hover: var(--green-700);

  --text-strong:  var(--navy-900);
  --text-body:    var(--sand-800);
  --text-muted:   var(--sand-600);
  --text-subtle:  var(--sand-500);
  --text-on-dark: #f4f6fb;
  --text-on-brand: #ffffff;
  --text-link:       var(--navy-700);
  --text-link-hover: var(--green-700);

  --surface-page:   var(--sand-50);
  --surface-card:   var(--white);
  --surface-sunken: var(--sand-100);
  --surface-brand:  var(--navy-700);
  --surface-accent: var(--green-50);

  --border-subtle:  var(--sand-200);
  --border-default: var(--sand-300);
  --border-strong:  var(--sand-400);
  --border-brand:   var(--navy-700);

  --focus-ring: var(--green-500);
}

/* ---- tokens/typography.css ---- */
/* Noble Health — Typography tokens
 * Display: Zilla Slab — a warm, sturdy slab serif that echoes the logo's bold serifs.
 * Body/UI:  Mulish — a friendly humanist sans, highly legible for care instructions & long text.
 * NOTE: No brand font files were provided. These are Google Fonts substitutions chosen to
 * match the logo's sturdy-serif + warm-sans character. Flagged in readme.md — please confirm.
 */


:root {
  --font-display: 'Zilla Slab', 'Georgia', serif;
  --font-body: 'Mulish', -apple-system, 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;

  /* Weights */
  --fw-regular: 400; /* @kind other */
  --fw-medium: 500; /* @kind other */
  --fw-semibold: 600; /* @kind other */
  --fw-bold: 700; /* @kind other */
  --fw-extrabold: 800; /* @kind other */

  /* Type scale — 1.200 (minor third), 16px base */
  --text-2xs: 0.6875rem;  /* 11px */
  --text-xs:  0.75rem;    /* 12px */
  --text-sm:  0.875rem;   /* 14px */
  --text-md:  1rem;       /* 16px */
  --text-lg:  1.125rem;   /* 18px */
  --text-xl:  1.375rem;   /* 22px */
  --text-2xl: 1.75rem;    /* 28px */
  --text-3xl: 2.25rem;    /* 36px */
  --text-4xl: 2.9375rem;  /* 47px */
  --text-5xl: 3.75rem;    /* 60px */

  /* Line heights */
  --leading-tight: 1.15;
  --leading-snug: 1.3;
  --leading-normal: 1.55;
  --leading-relaxed: 1.7;

  /* Letter spacing */
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-caps: 0.08em; /* for small uppercase labels/eyebrows */
}

/* ---- tokens/spacing.css ---- */
/* Noble Health — Spacing & layout tokens. 4px base unit. */
:root {
  --space-0: 0;
  --space-1: 0.25rem;  /* 4 */
  --space-2: 0.5rem;   /* 8 */
  --space-3: 0.75rem;  /* 12 */
  --space-4: 1rem;     /* 16 */
  --space-5: 1.25rem;  /* 20 */
  --space-6: 1.5rem;   /* 24 */
  --space-8: 2rem;     /* 32 */
  --space-10: 2.5rem;  /* 40 */
  --space-12: 3rem;    /* 48 */
  --space-16: 4rem;    /* 64 */
  --space-20: 5rem;    /* 80 */
  --space-24: 6rem;    /* 96 */
  --space-32: 8rem;    /* 128 */

  /* Layout */
  --container-sm: 40rem;   /* 640 */
  --container-md: 52rem;   /* 832 */
  --container-lg: 72rem;   /* 1152 */
  --container-xl: 80rem;   /* 1280 */
  --gutter: var(--space-6);
  --section-y: var(--space-24);
}

/* ---- tokens/effects.css ---- */
/* Noble Health — Radii, borders, shadows.
 * Rounded, soft corners = approachable & human. Shadows are warm-tinted (navy base),
 * soft and low — never harsh. Cards lift gently; nothing clinical.
 */
:root {
  /* Radii — generously rounded, friendly */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;
  --radius-circle: 50%;

  /* Borders */
  --border-width: 1px;
  --border-width-strong: 2px;

  /* Shadows — warm navy-tinted, soft & diffuse */
  --shadow-xs: 0 1px 2px rgba(20, 38, 63, 0.06);
  --shadow-sm: 0 1px 3px rgba(20, 38, 63, 0.08), 0 1px 2px rgba(20, 38, 63, 0.05);
  --shadow-md: 0 4px 12px rgba(20, 38, 63, 0.08), 0 2px 4px rgba(20, 38, 63, 0.05);
  --shadow-lg: 0 12px 28px rgba(20, 38, 63, 0.12), 0 4px 8px rgba(20, 38, 63, 0.06);
  --shadow-xl: 0 24px 48px rgba(20, 38, 63, 0.16), 0 8px 16px rgba(20, 38, 63, 0.08);

  /* Focus ring */
  --ring-width: 3px;
  --ring-color: rgba(124, 179, 64, 0.45); /* green-500 @ 45% */
}

/* ---- tokens/motion.css ---- */
/* Noble Health — Motion tokens.
 * Gentle & reassuring. Ease-out for entrances, no bounce, no aggressive spring.
 * Movement is subtle: a soft lift, a calm fade. Respect prefers-reduced-motion.
 */
:root {
  --duration-fast: 120ms; /* @kind other */
  --duration-base: 200ms; /* @kind other */
  --duration-slow: 320ms; /* @kind other */
  --duration-slower: 500ms; /* @kind other */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --ease-in: cubic-bezier(0.4, 0, 1, 1); /* @kind other */
}