/* ============================================================================
   HCDI — Colors & Type
   HealthCare Dynamics International — "Optimize Health Outcomes"
   Archetypes: Sage (intelligence, data, trust) + Caregiver (warmth, care, hope)

   Brand fonts — self-hosted Raleway + Roboto + Roboto Condensed.
   ========================================================================== */

/* ---- Roboto (body / UI) ------------------------------------------------- */
@font-face { font-family:'Roboto'; font-weight:300; font-style:normal; font-display:swap; src:url('fonts/Roboto-Light.ttf') format('truetype'); }
@font-face { font-family:'Roboto'; font-weight:400; font-style:normal; font-display:swap; src:url('fonts/Roboto-Regular.ttf') format('truetype'); }
@font-face { font-family:'Roboto'; font-weight:400; font-style:italic; font-display:swap; src:url('fonts/Roboto-Italic.ttf') format('truetype'); }
@font-face { font-family:'Roboto'; font-weight:500; font-style:normal; font-display:swap; src:url('fonts/Roboto-Medium.ttf') format('truetype'); }
@font-face { font-family:'Roboto'; font-weight:700; font-style:normal; font-display:swap; src:url('fonts/Roboto-Bold.ttf') format('truetype'); }
@font-face { font-family:'Roboto'; font-weight:900; font-style:normal; font-display:swap; src:url('fonts/Roboto-Black.ttf') format('truetype'); }

/* ---- Roboto Condensed (display / eyebrows / data labels) ---------------- */
@font-face { font-family:'Roboto Condensed'; font-weight:300; font-style:normal; font-display:swap; src:url('fonts/RobotoCondensed-Light.ttf') format('truetype'); }
@font-face { font-family:'Roboto Condensed'; font-weight:400; font-style:normal; font-display:swap; src:url('fonts/RobotoCondensed-Regular.ttf') format('truetype'); }
@font-face { font-family:'Roboto Condensed'; font-weight:700; font-style:normal; font-display:swap; src:url('fonts/RobotoCondensed-Bold.ttf') format('truetype'); }

/* ---- Raleway (display headlines) ---------------------------------------- */
@font-face { font-family:'Raleway'; font-weight:600; font-style:normal; font-display:swap; src:url('fonts/Raleway-SemiBold.ttf') format('truetype'); }
@font-face { font-family:'Raleway'; font-weight:700; font-style:normal; font-display:swap; src:url('fonts/Raleway-Bold.ttf') format('truetype'); }
@font-face { font-family:'Raleway'; font-weight:800; font-style:normal; font-display:swap; src:url('fonts/Raleway-ExtraBold.ttf') format('truetype'); }
@font-face { font-family:'Raleway'; font-weight:900; font-style:normal; font-display:swap; src:url('fonts/Raleway-Black.ttf') format('truetype'); }

:root {
  /* ---- Brand: the dove (orange is the ONLY accent family) ---------------- */
  --gold:        #F6B12B;   /* sunrise gold — upper dove, highlights        */
  --gold-soft:   #FAD27A;   /* tint for fills                                */
  --amber:       #F59324;   /* mid amber                                    */
  --ember:       #EE7A2E;   /* PRIMARY brand orange — the dove's body       */
  --ember-600:   #E06A22;   /* hover                                        */
  --ember-700:   #C8551B;   /* press / clay                                 */
  --clay:        #A53C12;   /* deep burnt orange                            */
  --clay-900:    #7C2C0D;   /* deepest — dark section ground                */
  --ember-tint:  #FDEFE1;   /* lightest wash for surfaces                    */
  --ember-tint-2:#FBE0CB;   /* soft chip fill                               */

  /* Orange gradients — the brand's signature device (used throughout) */
  --grad-dove:  linear-gradient(120deg, #F8B733 0%, #F2872A 55%, #E2611C 100%); /* @kind color */
  --grad-warm:  linear-gradient(135deg, #FFC25C 0%, #F6892B 48%, #E45F1E 100%); /* @kind color */
  --grad-deep:  linear-gradient(155deg, #C9551B 0%, #8F340F 100%); /* @kind color */
  --grad-wash:  linear-gradient(180deg, #FFFFFF 0%, #FFF6EE 100%); /* @kind color */
  --grad-glow:  radial-gradient(circle, rgba(246,177,43,0.20), transparent 66%); /* @kind color */

  /* ---- "Spruce" tokens repointed to deep ORANGE (no green anywhere) ------
     Kept as names so components stay wired; every value is now warm. */
  --spruce:      #A23C12;   /* deep burnt orange (was green)                */
  --spruce-600:  #BE4A18;
  --spruce-400:  #E0682B;
  --spruce-tint: #FDEFE1;
  --spruce-tint-2:#FBDDC6;

  /* ---- Ink & neutrals (clean, near-neutral — not beige) ----------------- */
  --ink-900:     #1B1714;   /* primary text, wordmark                       */
  --ink-700:     #3A352F;   /* strong body                                  */
  --ink-500:     #6B6359;   /* secondary text                               */
  --ink-400:     #918A7E;   /* tertiary / captions                          */
  --ink-300:     #BCB5AB;   /* disabled                                     */

  --paper:       #FFFFFF;   /* PAGE background — pure white                 */
  --surface:     #FFFFFF;   /* cards, sheets                                */
  --cloud:       #FFF8F2;   /* alt sections — faint warm-white (not beige)  */
  --sand:        #FDF1E8;   /* subtle warm fill                             */
  --line:        #ECE8E3;   /* hairline borders — light neutral             */
  --line-strong: #DCD6CE;   /* stronger dividers                            */

  /* ---- Semantic feedback ------------------------------------------------ */
  --success:     #2E8B57;   --success-tint: #E6F2EB;
  --warning:     #DC9B12;   --warning-tint: #FBEFCF;
  --danger:      #C8492E;   --danger-tint:  #F8E3DC;
  --info:        #C8551B;   --info-tint:    #FDEFE1;

  /* ---- Typography families ---------------------------------------------- */
  --font-display: 'Raleway', 'Roboto', Arial, sans-serif;            /* headlines */
  --font-sans:    'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  --font-mono:    'Roboto Condensed', 'Roboto', Arial, sans-serif;   /* eyebrows / data labels / numerals */

  /* ---- Type scale — sleeker: lighter display weights, tighter tracking --- */
  --text-display: 700 clamp(2.9rem, 5.3vw, 4.75rem)/1.0 var(--font-display);
  --text-h1:      700 clamp(2.1rem, 3.4vw, 3.1rem)/1.05 var(--font-display);
  --text-h2:      600 clamp(1.6rem, 2.3vw, 2.15rem)/1.12 var(--font-display);
  --text-h3:      700 1.3125rem/1.22 var(--font-sans);
  --text-h4:      500 1.0625rem/1.32 var(--font-sans);
  --text-body-lg: 300 1.1875rem/1.62 var(--font-sans);   /* Roboto Light = sleeker lead */
  --text-body:    400 1rem/1.62 var(--font-sans);
  --text-small:   400 0.875rem/1.5 var(--font-sans);
  --text-caption: 500 0.75rem/1.4 var(--font-sans);
  --text-eyebrow: 700 0.75rem/1 var(--font-mono);
  --eyebrow-tracking: 0.18em;

  /* ---- Radii ------------------------------------------------------------ */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* ---- Spacing (4pt base) ----------------------------------------------- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px;

  /* ---- Elevation — warm, soft, low-spread (never harsh black) ----------- */
  --shadow-xs: 0 1px 2px rgba(26,23,20,0.05);
  --shadow-sm: 0 1px 3px rgba(26,23,20,0.06), 0 1px 2px rgba(26,23,20,0.04);
  --shadow-md: 0 10px 24px -10px rgba(40,28,18,0.16), 0 2px 6px -2px rgba(40,28,18,0.06);
  --shadow-lg: 0 26px 54px -18px rgba(40,28,18,0.22), 0 8px 18px -10px rgba(40,28,18,0.10);
  --shadow-ember: 0 12px 30px -8px rgba(224,106,34,0.45);

  /* ---- Motion ----------------------------------------------------------- */
  /* calm, confident ease-out */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --dur-fast: 130ms; /* @kind other */
  --dur: 240ms; /* @kind other */
  --dur-slow: 560ms; /* @kind other */
}

/* ============================================================================
   Semantic element defaults — opt-in via .hcdi-type on a wrapper, or copy rules
   ========================================================================== */
.hcdi-type {
  font: var(--text-body);
  color: var(--ink-900);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.hcdi-type h1 { font: var(--text-h1); color: var(--ink-900); letter-spacing: -0.01em; margin: 0; text-wrap: balance; }
.hcdi-type h2 { font: var(--text-h2); color: var(--ink-900); letter-spacing: -0.01em; margin: 0; text-wrap: balance; }
.hcdi-type h3 { font: var(--text-h3); color: var(--ink-900); margin: 0; }
.hcdi-type h4 { font: var(--text-h4); color: var(--ink-900); margin: 0; }
.hcdi-type p  { font: var(--text-body); color: var(--ink-700); margin: 0; text-wrap: pretty; }
.hcdi-type a  { color: var(--ember-700); text-underline-offset: 3px; text-decoration-thickness: 1px; }
.hcdi-type small { font: var(--text-small); color: var(--ink-500); }

.display  { font: var(--text-display); letter-spacing: -0.025em; color: var(--ink-900); text-wrap: balance; }
.eyebrow  { font: var(--text-eyebrow); letter-spacing: var(--eyebrow-tracking);
            text-transform: uppercase; color: var(--ember-700); }
.lead     { font: var(--text-body-lg); color: var(--ink-500); text-wrap: pretty; }
.mono     { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.tnum     { font-variant-numeric: tabular-nums; }

/* Accent rule used under eyebrows / section heads */
.rule-dove { width: 44px; height: 3px; border-radius: 2px; background: var(--grad-dove); }