/* ------------------------------------------------------------------------
   Doctor 365 Care — design tokens
   Source of truth: 03_prd.md §4 (Design system)
   Palette, type scale, spacing, motion durations.
   ------------------------------------------------------------------------ */

:root {
  /* Palette ----------------------------------------------------------- */
  --paper:     #FAF8F4;   /* page background, dominant tone */
  --paper-2:   #F3EEE5;   /* section backgrounds, alternating bands */
  --ink:       #0F1F3D;   /* primary text, nav, logo */
  --ink-2:     #1A365D;   /* secondary text, links, accents */
  --bronze:    #C9892B;   /* accent — subscribe button, key callouts */
  --slate:     #98A3A3;   /* muted text, captions */
  --rule:      #EBE3D3;   /* hairline rules, form borders — lighter */
  --rule-soft: #F1ECDF;   /* extra-soft hairline for nested elements */

  --ink-rgb:   15, 31, 61;
  --paper-rgb: 250, 248, 244;

  /* Type --------------------------------------------------------------- */
  --font-sans:  'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-serif: 'Source Serif 4', 'Source Serif Pro', Georgia, serif;

  /* Type scale — fluid via clamp() so it scales gracefully from 360px to 1920px.
     Lower bound = mobile floor, upper bound = desktop max. */
  --fs-h1:        clamp(2.5rem, 8vw, 3.75rem);   /* 40 → 60px (desktop overrides) */
  --fs-h2:        clamp(1.875rem, 5.5vw, 2.25rem); /* 30 → 36px */
  --fs-h3:        clamp(1.375rem, 3.4vw, 1.5rem);
  --fs-h4:        1.125rem;
  --fs-body-lg:   1.0625rem;
  --fs-body:      1rem;
  --fs-caption:   0.875rem;
  --fs-micro:     0.75rem;
  --fs-numeral:   clamp(2.75rem, 8vw, 3.5rem);

  /* Radii — softer corners */
  --r-sm:    10px;
  --r-md:    14px;
  --r-lg:    18px;
  --r-xl:    24px;
  --r-pill:  999px;

  /* Shadows — soft, ink-tinted */
  --shadow-xs: 0 1px 2px rgba(15, 31, 61, 0.04);
  --shadow-sm: 0 4px 12px rgba(15, 31, 61, 0.06);
  --shadow-md: 0 12px 28px rgba(15, 31, 61, 0.08);
  --shadow-lg: 0 20px 48px rgba(15, 31, 61, 0.10);
  --shadow-bronze: 0 10px 24px rgba(201, 137, 43, 0.18);

  /* Line height */
  --lh-body:      1.6;
  --lh-heading:   1.2;
  --lh-tight:     1.15;

  /* Spacing scale (4px base) ------------------------------------------ */
  --s-1:    4px;
  --s-2:    8px;
  --s-3:   12px;
  --s-4:   16px;
  --s-6:   24px;
  --s-8:   32px;
  --s-12:  48px;
  --s-16:  64px;
  --s-24:  96px;
  --s-32: 128px;

  --container-max:    1280px;
  --container-prose:    720px;
  --container-narrow:   640px;
  --gutter-mobile:    24px;
  --gutter-desktop:   64px;

  --section-pad-y-mobile:  72px;
  --section-pad-y-desktop: 128px;

  /* Motion ------------------------------------------------------------- */
  --ease:          cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --d-color:       200ms;
  --d-transform:   300ms;
  --d-reveal:      600ms;

  /* Layers ------------------------------------------------------------- */
  --z-nav:    50;
  --z-sheet:  90;
  --z-toast: 100;
}

@media (min-width: 960px) {
  :root {
    --fs-h1:       clamp(3.75rem, 6.5vw, 5.5rem);
    --fs-h2:       clamp(2.25rem, 4.2vw, 3rem);
    --fs-h3:       1.875rem;
    --fs-h4:       1.25rem;
    --fs-numeral:  clamp(3.75rem, 6vw, 5rem);
    --fs-body-lg:  1.125rem;
  }
}