/* ============================================================
   Red Hill Advisors — Website Design Tokens
   The single source of truth for all visual values on the site.
   Derived from the Red Hill brand core (brand red #A61618, DM Sans,
   8pt grid). Every page links this file first. Never hard-code a
   color, size, or spacing value — use a token.
   ============================================================ */

:root {

  /* ── BRAND ──
     Canonical site red is #A61618 (shared across the web, deck, and dashboard systems).
     The logo SVG uses #A41E22 — visually identical at this saturation — and is left as-is.
     The logo's slate (#65707C) belongs to the logo artwork only; it is deliberately NOT a
     UI token, so the interface palette stays on the warm neutral scale below. */
  --rh-red:        #A61618;   /* primary brand accent */
  --rh-red-dark:   #7A1012;   /* hover / pressed on red */
  --rh-red-light:  #D4393B;
  --rh-red-pale:   #F5E0E0;   /* tint backgrounds */
  --rh-red-ghost:  #FBF0F0;   /* faintest tint */

  /* ── DARK SCALE (headers, footers, dark sections) ── */
  --rh-ink:    #131517;
  --rh-black:  #231F20;
  --rh-navy:   #1C2A3A;
  --rh-navy-light: #2A3F56;

  /* ── NEUTRALS (warm gray, 10 steps) ── */
  --neutral-50:  #FFFFFF;
  --neutral-100: #F8F7F6;
  --neutral-200: #F0EEEC;
  --neutral-300: #E0DCD8;
  --neutral-400: #B8B2AC;
  --neutral-500: #918A84;
  --neutral-600: #78716C;
  --neutral-700: #6B6560;
  --neutral-800: #44403C;
  --neutral-900: #1C1917;

  /* ── GOLD (premium / highlight accent — secondary, sparing) ── */
  --rh-gold:       #C4A35A;
  --rh-gold-light: #E8D9B0;
  --rh-gold-pale:  #FAF5E8;

  /* ── SEMANTIC ROLES ── */
  --bg-page:        var(--neutral-50);    /* default page background */
  --bg-alt:         var(--neutral-100);   /* alternating section background */
  --bg-inset:       var(--neutral-200);   /* recessed areas */
  --bg-surface:     #FFFFFF;              /* cards */
  --bg-dark:        var(--rh-black);      /* dark sections, footer */
  --bg-dark-alt:    var(--rh-navy);       /* dark section variant */

  --text-primary:   var(--neutral-900);   /* headings, body */
  --text-secondary: var(--neutral-700);   /* supporting copy */
  --text-muted:     var(--neutral-600);   /* captions, metadata */
  --text-inverse:   #FFFFFF;              /* text on dark */
  --text-inverse-muted: rgba(255,255,255,0.72); /* muted text on dark (footer, captions) */
  --text-accent:    var(--rh-red);        /* links, emphasis */

  --border:         var(--neutral-300);
  --border-subtle:  var(--neutral-200);
  --border-accent:  var(--rh-red);
  --focus-ring:     0 0 0 3px rgba(166, 22, 24, 0.35);  /* visible focus, WCAG */

  /* ── TYPOGRAPHY ── */
  --font-display: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body:    'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Type scale (rem, fluid-friendly). Max 5 levels of hierarchy. */
  --text-hero:     clamp(2.5rem, 5vw, 4rem);     /* 40–64px — hero headline */
  --text-h1:       clamp(2rem, 3.5vw, 2.75rem);  /* 32–44px — page title */
  --text-h2:       clamp(1.5rem, 2.5vw, 2rem);   /* 24–32px — section heading */
  --text-h3:       1.25rem;                      /* 20px — card / sub heading */
  --text-body:     1.0625rem;                    /* 17px — body */
  --text-small:    0.9375rem;                    /* 15px — captions, meta */
  --text-label:    0.8125rem;                    /* 13px — eyebrow / labels (uppercase) */

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  --leading-tight:   1.15;   /* hero, headings */
  --leading-snug:    1.3;    /* sub-headings */
  --leading-normal:  1.55;   /* body */
  --leading-relaxed: 1.7;    /* long-form reading */

  --tracking-tight:  -0.02em; /* large headings */
  --tracking-normal: 0;
  --tracking-caps:   0.1em;   /* uppercase eyebrows / labels */

  /* ── SPACING (8pt grid) ── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;   /* section vertical rhythm */
  --space-32: 128px;  /* generous section breaks */

  /* ── LAYOUT ── */
  --content-max:   1200px;  /* main content container */
  --prose-max:     680px;   /* readable text column */
  --gutter:        var(--space-6);   /* horizontal page padding (mobile) */
  --gutter-lg:     var(--space-12);  /* horizontal page padding (desktop) */
  --header-height: 72px;

  /* ── RADIUS ── */
  --radius-sm:   4px;    /* pills, badges */
  --radius-md:   8px;    /* buttons, inputs */
  --radius-lg:   12px;   /* cards */
  --radius-xl:   20px;   /* large feature panels */
  --radius-full: 9999px;

  /* ── ELEVATION (4 levels max) ── */
  --shadow-sm:    0 1px 2px rgba(0,0,0,0.05);
  --shadow-md:    0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg:    0 8px 24px rgba(0,0,0,0.12);
  --shadow-panel: 0 16px 48px rgba(19,21,23,0.16);

  /* ── MOTION ── */
  --ease:        cubic-bezier(0.4, 0, 0.2, 1);
  --duration:    200ms;
  --duration-lg: 400ms;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}