/* =====================================================================
   ATLANTA CANCER CARE — DESIGN TOKENS
   File:   salient-child/css/acc/acc-tokens.css
   Loads:  first, on every page (see inc/acc/acc-enqueue.php)

   Every other acc-*.css file reads these variables. Change a color, font
   or spacing step here once and it changes everywhere.

   Token names continue the ones already used on staging (--acc-forest,
   --acc-sage, --acc-cream, --acc-card …) so the existing rebuilt
   templates keep working, and add the brand aliases Chris asked for
   (--acc-dark-green, --acc-green, --acc-red).
   ===================================================================== */

:root {
	/* ---------- Brand colors (from ACC) ---------- */
	--acc-dark-green: #16291F;
	--acc-green:      #4B7A5E;
	--acc-cream:      #FAF6EE;
	--acc-red:        #BC2025;

	/* ---------- Supporting palette (tints and shades of the brand) ---------- */
	--acc-forest:      var(--acc-dark-green); /* existing name, same color */
	--acc-forest-deep: #0F1E16;               /* hover on dark green */
	--acc-sage:        var(--acc-green);      /* existing name, same color */
	--acc-green-ink:   #3F6A51;               /* green for small text on tinted panels (5.7:1 on cream) */
	--acc-sage-light:  #E7EEE5;               /* light green panel */
	--acc-sage-pale:   #BFD2C4;               /* rules and text on dark green */
	--acc-card:        #F3EEE1;               /* warm panel, one step darker than cream */
	--acc-white:       #FFFFFF;
	--acc-ink:         #2B2B26;               /* body text */
	--acc-muted:       #565F55;               /* secondary text (6.2:1 on cream) */
	--acc-line:        #DDD6C4;               /* borders on cream */
	--acc-line-strong: #C9C0AA;
	--acc-on-dark:     #C9D3C7;               /* body text on dark green (9.9:1) */
	--acc-red-deep:    #9A1A1E;               /* red hover */
	--acc-red-tint:    #F8E9E6;               /* alert background */

	/* Gold: the accent Chris chose for buttons and hover marks (replaces red there). */
	--acc-gold:        #C7A96B;
	--acc-gold-hover:  #B39352;               /* gold button hover (forest text stays 5:1+) */
	--acc-gold-deep:   #A9873F;

	/* ---------- Semantic roles ---------- */
	--acc-bg:            var(--acc-cream);
	--acc-surface:       var(--acc-white);
	--acc-surface-warm:  var(--acc-card);
	--acc-text:          var(--acc-ink);
	--acc-heading:       var(--acc-dark-green);
	--acc-link:          var(--acc-green-ink);
	--acc-link-hover:    var(--acc-dark-green);
	--acc-accent:        var(--acc-gold);      /* small editorial marks: the short rule before section labels */
	--acc-cta:           var(--acc-gold);      /* primary action button (header "Send Us a Message") */
	--acc-cta-hover:     var(--acc-gold-hover);
	--acc-cta-text:      var(--acc-dark-green);/* forest on gold: 6.8:1. White on gold is too faint */
	--acc-hover-mark:    var(--acc-gold);      /* hover and current-page underline in the menu */
	--acc-focus:         #1D5FBF;              /* focus ring: blue reads as "focus" on green/cream (5.9:1 on cream) */
	--acc-focus-on-dark: #FFFFFF;

	/* ---------- Typography ----------
	   Brand fonts: Frank Ruhl Libre (display) + Roboto (text).
	   Staging currently overrides these with Fraunces / Public Sans from
	   Salient's Custom CSS box. See DEPLOYMENT-GUIDE step "Fonts". */
	--acc-font-head: 'Frank Ruhl Libre', Georgia, 'Times New Roman', serif;
	--acc-font-body: 'Roboto', 'Helvetica Neue', Arial, sans-serif;

	/* Fluid type scale: min at 360px, max at 1440px */
	--acc-fs-xs:   0.8125rem;                                   /* 13px  labels */
	--acc-fs-sm:   0.9375rem;                                   /* 15px  small text */
	--acc-fs-base: 1.0625rem;                                   /* 17px  body */
	--acc-fs-lg:   clamp(1.125rem, 1.06rem + 0.3vw, 1.25rem);   /* 18–20 lead */
	--acc-fs-h6:   1rem;
	--acc-fs-h5:   1.125rem;
	--acc-fs-h4:   clamp(1.25rem, 1.18rem + 0.3vw, 1.375rem);   /* 20–22 */
	--acc-fs-h3:   clamp(1.375rem, 1.25rem + 0.55vw, 1.75rem);  /* 22–28 */
	--acc-fs-h2:   clamp(1.75rem, 1.5rem + 1.1vw, 2.5rem);      /* 28–40 */
	--acc-fs-h1:   clamp(2.125rem, 1.7rem + 1.9vw, 3.5rem);     /* 34–56 */
	--acc-fs-display: clamp(2.5rem, 1.9rem + 2.7vw, 4.25rem);   /* 40–68 statement lines */

	--acc-lh-tight: 1.12;
	--acc-lh-snug:  1.3;
	--acc-lh-body:  1.7;

	--acc-fw-regular: 400;
	--acc-fw-body:    600;   /* body copy weight Chris chose: 400 read too faint on cream */
	--acc-fw-medium:  500;
	--acc-fw-bold:    700;

	--acc-tracking-label: 0.08em;

	/* ---------- Spacing (4px base) ---------- */
	--acc-space-1: 0.25rem;  /* 4  */
	--acc-space-2: 0.5rem;   /* 8  */
	--acc-space-3: 0.75rem;  /* 12 */
	--acc-space-4: 1rem;     /* 16 */
	--acc-space-5: 1.5rem;   /* 24 */
	--acc-space-6: 2rem;     /* 32 */
	--acc-space-7: 3rem;     /* 48 */
	--acc-space-8: 4rem;     /* 64 */
	--acc-space-9: 6rem;     /* 96 */

	/* Vertical rhythm between page sections */
	--acc-section-y:       clamp(3rem, 2rem + 4vw, 6rem);
	--acc-section-y-tight: clamp(2rem, 1.5rem + 2.5vw, 3.5rem);

	/* ---------- Layout ---------- */
	--acc-container:        1200px;
	--acc-container-wide:   1360px;
	--acc-container-narrow: 760px;
	--acc-measure:          68ch;  /* comfortable line length */
	--acc-gutter:           clamp(1rem, 0.5rem + 2.5vw, 2.5rem);
	--acc-grid-gap:         clamp(1rem, 0.75rem + 1vw, 1.75rem);

	/* ---------- Shape and depth (kept deliberately quiet) ---------- */
	--acc-radius-sm: 3px;
	--acc-radius:    6px;
	--acc-radius-lg: 10px;
	--acc-shadow-sm: 0 1px 2px rgba(22, 41, 31, 0.06);
	--acc-shadow:    0 12px 28px -18px rgba(22, 41, 31, 0.35);

	/* ---------- Motion ---------- */
	--acc-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
	--acc-dur:  180ms;

	/* ---------- Header (read by acc-header.css and scroll offsets) ---------- */
	--acc-header-h: 96px;
}

@media (max-width: 1300px) {
	:root { --acc-header-h: 76px; }
}

@media (prefers-reduced-motion: reduce) {
	:root { --acc-dur: 0ms; }
}