/* Bayside Health design tokens — sourced from Claude Design export
   (tokens/colors.css + typography.css + spacing.css + effects.css).
   Fonts are self-hosted via css/fonts.css; base element styles live in app.css. */

/* ============================================================
   Bayside Health — Color tokens
   Palette sourced from the brand PowerPoint theme ("Bayside Health")
   ============================================================ */
:root {
  /* ---- Brand core ---- */
  --navy-900: #102338;   /* deepest — large fills, footers */
  --navy-800: #16314e;
  --navy:     #1B3757;   /* PRIMARY brand navy (theme accent1 / dk2) */
  --navy-600: #2c4d70;
  --navy-500: #436287;
  --navy-300: #8295ab;

  --coral:     #E97051;  /* PRIMARY accent (theme accent2) */
  --coral-600: #d85a3c;  /* hover / pressed */
  --coral-200: #f6c4b6;  /* tint */
  --coral-50:  #fdeee9;

  --maroon:   #6D2F46;   /* secondary accent (theme accent3) */
  --maroon-600: #592538;

  --teal:     #A8DBDD;   /* soft supporting (theme accent4) */
  --teal-300: #c6e8e9;
  --teal-50:  #ecf7f7;

  --blue:     #3C7CC2;   /* link / informational (theme hyperlink) */
  --blue-600: #2f659f;

  --pale-blue: #E5F0FF;  /* tint surface (theme accent6) */

  /* ---- Neutrals (cool, navy-leaning) ---- */
  --white:    #FFFFFF;
  --cream:    #F5FBF1;   /* brand page background (sampled from collateral) */
  --paper:    #FCFEFB;
  --grey-50:  #f1f4f7;
  --grey-100: #e7ecf1;
  --grey-200: #d4dce4;
  --grey-300: #b6c2cd;
  --grey-400: #8a97a4;
  --grey-500: #5f6e7c;
  --grey-700: #38485a;
  --ink:      #18222e;

  /* ---- Semantic / status ---- */
  --success:  #2f8a5b;
  --success-50: #e7f3ec;
  --warning:  #E97051;   /* coral does double duty for attention */
  --danger:   #c0392b;
  --danger-50: #f8e9e7;
  --info:     #3C7CC2;
  --info-50:  #e8f0f8;

  /* ============================================================
     SEMANTIC ALIASES — reach for these in components
     ============================================================ */
  --surface-page:    var(--cream);
  --surface-card:    var(--white);
  --surface-sunken:  var(--grey-50);
  --surface-inverse: var(--navy);
  --surface-accent:  var(--coral);
  --surface-tint:    var(--pale-blue);
  --surface-teal:    var(--teal-50);

  --text-heading:    var(--navy);
  --text-body:       var(--grey-700);
  --text-muted:      var(--grey-500);
  --text-inverse:    var(--white);
  --text-on-accent:  var(--white);
  --text-link:       var(--blue);

  --border-subtle:   var(--grey-200);
  --border-default:  var(--grey-300);
  --border-strong:   var(--navy);
  --border-focus:    var(--blue);

  --accent:          var(--coral);
  --accent-hover:    var(--coral-600);
}

/* ============================================================
   Bayside Health — Typography tokens
   ============================================================ */
:root {
  /* ---- Families ---- */
  --font-display: 'Hanken Grotesk', 'Segoe UI', system-ui, sans-serif;
  --font-body:    'Source Sans 3', 'Segoe UI', system-ui, sans-serif;
  --font-mono:    ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

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

  /* ---- Type scale (1.25 major-third-ish, tuned) ---- */
  --text-xs:   0.75rem;   /* 12px — captions, legal */
  --text-sm:   0.875rem;  /* 14px — supporting, labels */
  --text-base: 1rem;      /* 16px — body default */
  --text-md:   1.125rem;  /* 18px — lead body */
  --text-lg:   1.375rem;  /* 22px — section subhead */
  --text-xl:   1.75rem;   /* 28px — card / H3 */
  --text-2xl:  2.25rem;   /* 36px — H2 */
  --text-3xl:  3rem;      /* 48px — H1 */
  --text-4xl:  4rem;      /* 64px — display */
  --text-5xl:  5.5rem;    /* 88px — hero / slide title */

  /* ---- Line heights ---- */
  --leading-tight:   1.08; /* @kind other */
  --leading-snug:    1.25; /* @kind other */
  --leading-normal:  1.5; /* @kind other */
  --leading-relaxed: 1.65; /* @kind other */

  /* ---- Letter spacing ---- */
  --tracking-tight:  -0.02em; /* @kind other */
  --tracking-snug:   -0.01em; /* @kind other */
  --tracking-normal: 0; /* @kind other */
  --tracking-wide:   0.08em; /* @kind other */

  /* ---- Semantic roles ---- */
  --heading-family: var(--font-display);
  --heading-weight: var(--fw-bold);
  --body-family:    var(--font-body);
}

/* ============================================================
   Bayside Health — Spacing & layout tokens
   4px base grid
   ============================================================ */
: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.5rem;   /* 24 */
  --space-6:  2rem;     /* 32 */
  --space-7:  2.5rem;   /* 40 */
  --space-8:  3rem;     /* 48 */
  --space-9:  4rem;     /* 64 */
  --space-10: 5rem;     /* 80 */
  --space-12: 6rem;     /* 96 */

  /* ---- Containers ---- */
  --container-sm:  640px;
  --container-md:  880px;
  --container-lg:  1120px;
  --container-xl:  1320px;
  --gutter:        clamp(1.25rem, 4vw, 4rem); /* @kind spacing */

  /* ---- Component sizing ---- */
  --control-h-sm: 2rem;     /* @kind spacing */
  --control-h:    2.75rem;  /* @kind spacing */
  --control-h-lg: 3.25rem;  /* @kind spacing */
}

/* ============================================================
   Bayside Health — Radius, border, shadow, motion tokens
   The brand reads calm & clinical: restrained radii, soft cool
   shadows tinted toward navy, quick confident easing.
   ============================================================ */
:root {
  /* ---- Corner radius ---- */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   10px;   /* default card / input */
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-pill: 999px;  /* chips, badges, segmented controls */

  /* ---- Borders ---- */
  --border-hair:  1px; /* @kind spacing */
  --border-thick: 2px; /* @kind spacing */

  /* ---- Shadows (cool, navy-tinted, low spread) ---- */
  --shadow-xs: 0 1px 2px rgba(16, 35, 56, 0.06);
  --shadow-sm: 0 1px 3px rgba(16, 35, 56, 0.08), 0 1px 2px rgba(16, 35, 56, 0.06);
  --shadow-md: 0 4px 12px rgba(16, 35, 56, 0.08), 0 2px 4px rgba(16, 35, 56, 0.05);
  --shadow-lg: 0 12px 28px rgba(16, 35, 56, 0.12), 0 4px 8px rgba(16, 35, 56, 0.06);
  --shadow-xl: 0 24px 56px rgba(16, 35, 56, 0.16);
  --ring-focus: 0 0 0 3px rgba(60, 124, 194, 0.35);  /* blue focus ring */

  /* ---- Motion ---- */
  --ease-standard: cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --dur-fast:   120ms; /* @kind other */
  --dur-base:   200ms; /* @kind other */
  --dur-slow:   320ms; /* @kind other */

  /* ---- Z-index ---- */
  --z-base:    0; /* @kind other */
  --z-sticky:  100; /* @kind other */
  --z-overlay: 1000; /* @kind other */
  --z-modal:   1100; /* @kind other */
  --z-toast:   1200; /* @kind other */
}