/*
 * CareGiving Navigator — brand.css
 *
 * The single source of truth for color, typography, spacing, motion,
 * and accessibility tokens used across the unified PWA. Every other
 * stylesheet (components.css, tree.css, page-specific overrides)
 * reaches for these custom properties — no hardcoded hex values
 * anywhere downstream.
 *
 * Locked May 2, 2026 against:
 *   - CLAUDE.md Part V (Brand Visual Identity)
 *   - Site-Outline_v2_2026-05-02.md Part 8 (Design System Note)
 * Typeface updated May 4, 2026 — Inter replaces Manrope per Stage 3 kickoff
 *   (Brief_PlatformEngineer_FrontDoor-Completion_2026-05-04.md §Stage 2 decision lock)
 */

:root {
  /* ----- Color palette (4-color system + warm near-white surface) ----- */
  --cg-navy:        #222A39;  /* primary background dark / body text on light */
  --cg-teal:        #3E7462;  /* secondary accent, dividers, callout backgrounds */
  --cg-orange:      #EC9213;  /* action color ONLY — CTAs, links, focus rings */
  --cg-warm-grey:   #887A7E;  /* meta text, captions, breadcrumbs, form labels */
  --cg-warm-white:  #F5F4F1;  /* primary light surface — easier on eyes than pure white */
  --cg-white:       #FFFFFF;

  /* Tinted derivatives — used sparingly, all derived from the four base hues */
  --cg-teal-tint:   rgba(62, 116, 98, 0.08);   /* ActionCallout background */
  --cg-orange-tint: rgba(236, 146, 19, 0.10);  /* press feedback flash */
  --cg-navy-soft:   rgba(34, 42, 57, 0.06);    /* hairline dividers on light */
  --cg-shadow-card: 0 1px 3px rgba(34, 42, 57, 0.08), 0 4px 12px rgba(34, 42, 57, 0.05);
  --cg-shadow-lift: 0 4px 14px rgba(34, 42, 57, 0.12), 0 8px 24px rgba(34, 42, 57, 0.06);

  /* ----- Typography ----- */
  /*
   * Inter is the body and heading face (locked May 4, 2026 — Stage 3 kickoff).
   * Slightly wider apertures than Manrope; more open at small sizes for the
   * 45–65 audience. Bahamas Normal stays locked to logo lockups (SVG/PNG
   * assets) — never web-loaded as a font. System fallbacks chosen for fast
   * first paint while Inter swaps in.
   */
  --cg-font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  --cg-fs-meta:    0.9375rem;  /* 15px — captions, breadcrumbs, form labels */
  --cg-fs-body:    1.0625rem;  /* 17px — mobile body baseline */
  --cg-fs-lead:    1.1875rem;  /* 19px — orientation paragraphs, intro text */
  --cg-fs-h3:      1.25rem;    /* 20px — sub-section headers */
  --cg-fs-h2:      1.5rem;     /* 24px — section headers */
  --cg-fs-h1:      1.875rem;   /* 30px — page titles */
  --cg-fs-display: 2.25rem;    /* 36px — hero headlines, tree question text */

  --cg-lh-tight:  1.15;  /* display */
  --cg-lh-snug:   1.2;   /* h1 */
  --cg-lh-normal: 1.3;   /* h2 */
  --cg-lh-relaxed:1.4;   /* h3 */
  --cg-lh-loose:  1.6;   /* body */
  --cg-lh-meta:   1.5;   /* meta */

  --cg-tracking-cta: 0.01em;  /* slight letter-spacing on buttons for tactile feel */

  /* ----- Spacing scale (multiples of 0.25rem ladder, named for clarity) ----- */
  --cg-space-1:  0.25rem;   /* 4px */
  --cg-space-2:  0.5rem;    /* 8px */
  --cg-space-3:  0.75rem;   /* 12px */
  --cg-space-4:  1rem;      /* 16px */
  --cg-space-5:  1.5rem;    /* 24px */
  --cg-space-6:  2rem;      /* 32px */
  --cg-space-7:  2.5rem;    /* 40px */
  --cg-space-8:  3rem;      /* 48px */
  --cg-space-9:  4rem;      /* 64px */
  --cg-space-10: 5rem;      /* 80px */

  /* ----- Layout ----- */
  --cg-content-max:  44rem;   /* 704px — body content width on long-form */
  --cg-wide-max:     72rem;   /* 1152px — pillar hubs, dashboards */
  --cg-radius-sm:    0.375rem;
  --cg-radius-md:    0.5rem;
  --cg-radius-lg:    0.75rem;
  --cg-radius-pill:  999px;

  /* ----- Tap targets + focus ----- */
  --cg-tap-min:      44px;   /* WCAG-AA minimum */
  --cg-focus-ring:   3px solid var(--cg-orange);
  --cg-focus-offset: 3px;

  /* ----- Motion ----- */
  --cg-easing-out: cubic-bezier(0.16, 1, 0.3, 1);
  --cg-easing-in:  cubic-bezier(0.7, 0, 0.84, 0);
  --cg-dur-fast:   150ms;
  --cg-dur-base:   200ms;
  --cg-dur-slow:   350ms;
}

/* Reduced-motion preference: collapse all transitions to a fast cross-fade */
@media (prefers-reduced-motion: reduce) {
  :root {
    --cg-dur-fast: 100ms;
    --cg-dur-base: 100ms;
    --cg-dur-slow: 100ms;
  }
  *, *::before, *::after {
    animation-duration: 100ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 100ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   Base reset / element styles
   ============================================================ */

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--cg-font-sans);
  font-size: var(--cg-fs-body);
  line-height: var(--cg-lh-loose);
  color: var(--cg-navy);
  background: var(--cg-warm-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

@media (min-width: 48rem) {
  body { font-size: 1.125rem; } /* 18px on tablet+ */
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--cg-font-sans);
  color: var(--cg-navy);
  margin-block-start: var(--cg-space-6);
  margin-block-end: var(--cg-space-3);
  text-wrap: balance;
}
h1 { font-size: var(--cg-fs-h1);   font-weight: 700; line-height: var(--cg-lh-snug); }
h2 { font-size: var(--cg-fs-h2);   font-weight: 600; line-height: var(--cg-lh-normal); }
h3 { font-size: var(--cg-fs-h3);   font-weight: 600; line-height: var(--cg-lh-relaxed); }

p, li {
  text-wrap: pretty;
}

p { margin-block: var(--cg-space-4); }

a {
  color: var(--cg-orange);
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
  transition: color var(--cg-dur-base) var(--cg-easing-out);
}
a:hover { color: var(--cg-navy); }

/* Universal focus state — orange ring at 3px with 3px offset */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: var(--cg-focus-ring);
  outline-offset: var(--cg-focus-offset);
  border-radius: var(--cg-radius-sm);
}

/* Tap-target minimum on interactive controls */
button,
input[type="button"],
input[type="submit"],
.cg-tap-target {
  min-height: var(--cg-tap-min);
  min-width: var(--cg-tap-min);
}

::selection {
  background: var(--cg-orange);
  color: var(--cg-navy);
}

img, svg, video {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Skip link for keyboard users — visible on focus only */
.skip-link {
  position: absolute;
  top: -100px;
  left: var(--cg-space-4);
  background: var(--cg-navy);
  color: var(--cg-warm-white);
  padding: var(--cg-space-3) var(--cg-space-5);
  border-radius: var(--cg-radius-md);
  z-index: 9999;
  text-decoration: none;
  font-weight: 600;
}
.skip-link:focus {
  top: var(--cg-space-4);
}