/* ==========================================================================
   Guardian Recovery — Brand Tokens
   Single source of truth. Swap values here to update the whole site.
   Ref: Guardian Recovery Brand Guidelines V2, Part II — Visual Identity
   ========================================================================== */

/* ---------- Fonts (self-hosted, no third-party requests) ---------- */

@font-face {
  font-family: 'DM Serif Text';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/dm-serif-text-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'DM Serif Text';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/dm-serif-text-latin-400-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-latin-300-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-latin-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-latin-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-latin-700-normal.woff2') format('woff2');
}

:root {
  /* ---------- Primary ---------- */
  --gr-midnight: #004860;   /* Primary dark  */
  --gr-gambodge: #FFAD00;   /* Brand accent  — graphic/fill only, never text on light */

  /* ---------- Service line: Cerulean (Adult SUD) ---------- */
  --cerulean-50:  #E0F0F4;
  --cerulean-200: #9DD3DF;
  --cerulean-400: #4DADC2;
  --cerulean-600: #00728B;
  --cerulean-700: #005368;
  --cerulean-900: #003A49;

  /* ---------- Service line: Pacific (Adult Mental Health) ---------- */
  --pacific-50:  #EAF3F7;
  --pacific-200: #BCDAE6;
  --pacific-400: #8CBBCF;  /* interpolated — confirm against brand sheet */
  --pacific-600: #5B9CB8;
  --pacific-700: #4280A0;
  --pacific-900: #2E5F78;

  /* ---------- Service line: Sage (Adolescent) ---------- */
  --sage-50:  #E4F0EE;
  --sage-200: #ABD4CC;
  --sage-400: #7BB5AA;  /* interpolated — confirm against brand sheet */
  --sage-600: #4B8C84;  /* confirm against brand sheet */
  --sage-700: #366861;
  --sage-900: #2D5C54;

  /* ---------- Interface ---------- */
  --gr-prussian: #083045;  /* Interface accent   */
  --gr-frost:    #FCFDFF;  /* Primary light bg   */
  --gr-shell:    #FAFAF9;  /* Soft neutral bg    */
  --gr-smoke:    #F2F1F0;  /* Secondary bg       */
  --gr-sand:     #E2E0DD;  /* Warm neutral bg    */
  --gr-glacier:  #D3E7EE;  /* Accent bg          */

  /* ---------- Text ---------- */
  --gr-eerie:      #212322;  /* Primary text   */
  --gr-cave:       #474646;  /* Secondary text */
  --gr-battleship: #979990;  /* Tertiary text  */
  --gr-cadet:      #A9BEC9;  /* confirm against brand sheet */

  /* ---------- Semantic ---------- */
  --text:        var(--gr-eerie);
  --text-soft:   var(--gr-cave);
  --text-mute:   #6B6B6B;      /* accessible tertiary on white (Battleship fails AA on body copy) */
  --surface:     var(--gr-frost);
  --surface-alt: var(--gr-shell);
  --surface-sub: var(--gr-smoke);
  --line:        var(--gr-sand);
  --line-soft:   #EBE9E7;

  /* Default accent = Midnight/Cerulean; overridden per service line below */
  --accent-50:   var(--cerulean-50);
  --accent-200:  var(--cerulean-200);
  --accent-400:  var(--cerulean-400);
  --accent-fill: var(--cerulean-600);
  --accent-700:  var(--cerulean-700);
  --accent-text: var(--cerulean-900);

  /* ---------- Status (derived from brand family, not stock red/green) ---------- */
  --status-low:      #2D6A4F;
  --status-low-bg:   #E7F1EC;
  --status-mild:     #8A6100;
  --status-mild-bg:  #FCF3DF;
  --status-mod:      #9A4A12;
  --status-mod-bg:   #FBEDE3;
  --status-high:     #8E2F2A;
  --status-high-bg:  #F8E9E7;

  /* ---------- Type scale (fluid, anchored to the brand print scale) ---------- */
  --font-head: 'DM Serif Text', Georgia, 'Times New Roman', serif;
  --font-body: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --fs-h1:      clamp(2.125rem, 1.35rem + 3.1vw, 3.5rem);
  --fs-h2:      clamp(1.625rem, 1.25rem + 1.5vw, 2.25rem);
  --fs-h3:      clamp(1.1875rem, 1.05rem + 0.55vw, 1.375rem);
  --fs-lead:    clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  --fs-body:    1rem;
  --fs-caption: 0.8125rem;
  --fs-eyebrow: 0.6875rem;

  /* ---------- Space ---------- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;

  /* ---------- Shape & depth ---------- */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(8, 48, 69, 0.06), 0 1px 3px rgba(8, 48, 69, 0.05);
  --shadow-md: 0 2px 4px rgba(8, 48, 69, 0.05), 0 8px 20px -6px rgba(8, 48, 69, 0.14);
  --shadow-lg: 0 4px 8px rgba(8, 48, 69, 0.05), 0 20px 44px -12px rgba(8, 48, 69, 0.20);

  --wrap: 68rem;
  --wrap-narrow: 44rem;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ==========================================================================
   Service-line accent themes. Set on <html> or any container.
   Per brand: Cerulean = Adult SUD, Pacific = Adult Mental Health,
   Sage = Adolescent.
   ========================================================================== */

.sl-cerulean {
  --accent-50: var(--cerulean-50);
  --accent-200: var(--cerulean-200);
  --accent-400: var(--cerulean-400);
  --accent-fill: var(--cerulean-600);
  --accent-700: var(--cerulean-700);
  --accent-text: var(--cerulean-900);
}
.sl-pacific {
  --accent-50: var(--pacific-50);
  --accent-200: var(--pacific-200);
  --accent-400: var(--pacific-400);
  --accent-fill: var(--pacific-600);
  --accent-700: var(--pacific-700);
  --accent-text: var(--pacific-900);
}
.sl-sage {
  --accent-50: var(--sage-50);
  --accent-200: var(--sage-200);
  --accent-400: var(--sage-400);
  --accent-fill: var(--sage-600);
  --accent-700: var(--sage-700);
  --accent-text: var(--sage-900);
}