/* ============================================================================
   RED SKY Consulting, tokens.css  (v2, regenerated)
   Single source of truth for color, type, spacing, motion, elevation in CSS.

   Lives at: /wp-content/themes/redsky-child/css/tokens.css
   Enqueued sitewide via redsky-child/functions.php (handle: rs2-tokens).
   Do NOT also paste into Divi > Theme Options > Custom CSS.

   Brand red locked on #C8102E (ruled Jul 2026). Type: Montserrat (display),
   Roboto (body), JetBrains Mono (utility), Bank Gothic (wordmark only).
   Supersedes the older v1 tokens that anchored on #c52327 / Droid Serif.

   Naming: --rs-{category}-{name}-{variant}
   Reference these vars in component and Code Module CSS. Never hard-code brand values.
   ========================================================================== */

:root {
  /* ====================== COLOR, Brand ====================== */
  --rs-color-brand-red:           #C8102E;  /* base, the only red set by hand */
  --rs-color-brand-red-bright:    #DC2229;  /* hover */
  --rs-color-brand-red-deep:      #9A0E25;  /* pressed */
  --rs-color-brand-red-highlight: #FF3D49;  /* on-dark accent only */

  /* ====================== COLOR, Red tint ramp ====================== */
  --rs-color-red-50:  #FBE9EC;
  --rs-color-red-100: #F6C7CD;
  --rs-color-red-200: #EC97A0;
  --rs-color-red-300: #DF5E6C;
  --rs-color-red-400: #D12F44;
  --rs-color-red-500: var(--rs-color-brand-red);
  --rs-color-red-700: var(--rs-color-brand-red-deep);
  --rs-color-red-900: #540A18;

  /* ====================== COLOR, Neutrals ====================== */
  --rs-color-paper:      #FFFFFF;  /* canvas */
  --rs-color-mist:       #F2F2F2;  /* section bands */
  --rs-color-fog:        #E5E5E5;  /* borders */
  --rs-color-silver:     #8A8A8A;  /* subtle text, strong borders */
  --rs-color-graphite:   #666666;  /* muted text */
  --rs-color-steel:      #444444;  /* secondary body text */
  --rs-color-ink-soft:   #222222;
  --rs-color-ink:        #111111;  /* primary text */
  --rs-color-near-black: #0A0A0A;  /* dark section backgrounds */

  /* ====================== COLOR, Semantic roles ====================== */
  --rs-color-bg-page:       var(--rs-color-paper);
  --rs-color-bg-muted:      var(--rs-color-mist);
  --rs-color-bg-inverse:    var(--rs-color-near-black);

  --rs-color-fg-default:    var(--rs-color-ink);
  --rs-color-fg-body:       var(--rs-color-steel);
  --rs-color-fg-muted:      var(--rs-color-graphite);
  --rs-color-fg-subtle:     var(--rs-color-silver);
  --rs-color-fg-on-accent:  var(--rs-color-paper);
  --rs-color-fg-on-inverse: var(--rs-color-mist);

  --rs-color-border-default: var(--rs-color-fog);
  --rs-color-border-strong:  var(--rs-color-silver);
  --rs-color-border-accent:  var(--rs-color-brand-red);

  --rs-color-accent-default: var(--rs-color-brand-red);
  --rs-color-accent-hover:   var(--rs-color-brand-red-bright);
  --rs-color-accent-pressed: var(--rs-color-brand-red-deep);

  /* ====================== COLOR, Status ====================== */
  --rs-color-success: #0E8A4E;
  --rs-color-warning: #D97706;
  --rs-color-error:   #B91C1C;
  --rs-color-info:    #1E40AF;

  --rs-gradient-brand-mark: linear-gradient(90deg, #C8102E 0%, #FF3D49 100%);

  /* ====================== TYPOGRAPHY ====================== */
  --rs-font-display:  'Montserrat', 'Helvetica Neue', Arial, sans-serif;        /* 600 700 800 */
  --rs-font-body:     'Roboto', 'Helvetica Neue', Arial, sans-serif;            /* 400 500 */
  --rs-font-mono:     'JetBrains Mono', 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  --rs-font-wordmark: 'Bank Gothic', 'Copperplate Gothic', 'Montserrat', sans-serif; /* wordmark only */

  --rs-fw-regular:  400;
  --rs-fw-medium:   500;
  --rs-fw-semibold: 600;
  --rs-fw-bold:     700;
  --rs-fw-black:    800;

  /* Body sizes fixed; display sizes fluid via clamp */
  --rs-fs-xs:   12px;
  --rs-fs-sm:   14px;
  --rs-fs-base: 16px;
  --rs-fs-md:   18px;
  --rs-fs-lg:   20px;
  --rs-fs-xl:   24px;
  --rs-fs-2xl:  clamp(26px, 3vw, 30px);
  --rs-fs-3xl:  clamp(28px, 3.4vw, 38px);
  --rs-fs-4xl:  clamp(32px, 4.2vw, 48px);
  --rs-fs-5xl:  clamp(38px, 5.2vw, 60px);
  --rs-fs-6xl:  clamp(44px, 6.4vw, 76px);

  --rs-lh-tight:   1.05;
  --rs-lh-snug:    1.2;
  --rs-lh-normal:  1.5;
  --rs-lh-relaxed: 1.65;

  --rs-tracking-tight:  -0.02em;
  --rs-tracking-normal: 0;
  --rs-tracking-wide:   0.04em;
  --rs-tracking-wider:  0.12em;   /* eyebrows, mono labels */

  /* ====================== SPACING (4px base) ====================== */
  --rs-space-1:  4px;
  --rs-space-2:  8px;
  --rs-space-3:  12px;
  --rs-space-4:  16px;
  --rs-space-5:  20px;
  --rs-space-6:  24px;
  --rs-space-8:  32px;
  --rs-space-10: 40px;
  --rs-space-12: 48px;
  --rs-space-16: 64px;
  --rs-space-20: 80px;
  --rs-space-24: 96px;
  --rs-space-32: 128px;
  --rs-space-section: clamp(72px, 11vh, 144px);  /* vertical section padding */

  /* ====================== RADIUS ====================== */
  --rs-radius-none: 0;
  --rs-radius-sm:   4px;
  --rs-radius-md:   8px;   /* buttons, inputs */
  --rs-radius-lg:   12px;  /* cards */
  --rs-radius-xl:   16px;
  --rs-radius-pill: 999px;

  /* ====================== BORDER WIDTHS ====================== */
  --rs-border-hair:  1px;
  --rs-border-thick: 2px;
  --rs-border-heavy: 4px;

  /* ====================== ELEVATION ====================== */
  --rs-shadow-l1:    0 1px 2px 0 rgba(17, 17, 17, 0.06);   /* card rest */
  --rs-shadow-l2:    0 4px 12px 0 rgba(17, 17, 17, 0.08);  /* card hover */
  --rs-shadow-l3:    0 12px 32px -4px rgba(17, 17, 17, 0.12); /* modal */
  --rs-shadow-focus: 0 0 0 3px rgba(200, 16, 46, 0.35);    /* focus ring */

  /* ====================== MOTION ====================== */
  --rs-ease-out:     cubic-bezier(0.16, 1, 0.3, 1);   /* signature enter */
  --rs-ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
  --rs-ease-exit:    cubic-bezier(0.4, 0, 1, 1);
  --rs-dur-fast:     120ms;
  --rs-dur-base:     200ms;
  --rs-dur-slow:     400ms;
  --rs-dur-hero:     800ms;

  /* ====================== SIZES, controls + containers ====================== */
  --rs-control-sm: 36px;
  --rs-control-md: 44px;   /* min touch target */
  --rs-control-lg: 52px;

  --rs-container-sm: 640px;
  --rs-container-md: 896px;
  --rs-container-lg: 1152px;
  --rs-container-xl: 1240px;  /* max content width */

  /* ====================== Z-INDEX ====================== */
  --rs-z-base:     0;
  --rs-z-raised:   10;
  --rs-z-dropdown: 100;
  --rs-z-sticky:   200;
  --rs-z-overlay:  1000;
  --rs-z-modal:    1100;
  --rs-z-toast:    1200;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --rs-dur-fast: 0ms;
    --rs-dur-base: 0ms;
    --rs-dur-slow: 0ms;
    --rs-dur-hero: 0ms;
  }
}