/**
 * @file
 * Rcomms Paragraphs — shipped design tokens (defaults).
 *
 * Defines every --rc-* custom property that paragraphs.css consumes, so the
 * module renders correctly on ANY theme out of the box. A host theme can
 * override any token by redefining it in its own :root (loaded after this
 * file), with no need to touch the module.
 *
 * This is the single source of truth for the token contract documented at the
 * top of paragraphs.css. Keep the two in sync.
 *
 * Values below are neutral, brandable defaults — replace via theme :root.
 */

:root {
  /* ============================================================
     TYPOGRAPHY — font families
     Both faces are loaded as external Google Fonts in
     esl_subtheme.libraries.yml (the `fonts` library): Roboto (base) + Orbitron
     (display).
     ============================================================ */
  --rc-font-family-base:    "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
  --rc-font-family-display: "Orbitron", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* ============================================================
     BRAND COLORS
     ============================================================ */
  --rc-color-brand-primary:      #0a5fc0;   /* main brand: FAQ panels, step titles, overlay */
  --rc-color-brand-primary-rgb:  10, 95, 192; /* primary as R,G,B for rgba() overlays */
  --rc-color-brand-secondary:    #002b5c;   /* dark/header variant: card headers, icon-grid titles */
  --rc-color-brand-secondary-rgb: 0, 43, 92; /* secondary as R,G,B for rgba()/--bs-primary-rgb */
  --rc-color-brand-tertiary:     #064895;   /* mid blue between primary & secondary: section titles, badges */
  --rc-color-brand-tertiary-rgb: 6, 72, 149; /* tertiary as R,G,B for rgba() */
  --rc-color-brand-accent:       #e2a829;   /* highlight/accent: subtitles, accent backgrounds */

  /* Editor color-class variants (field_color_class) */
  --rc-color-brand-blue:         #1d84c3;
  --rc-color-brand-green:        #3a9e57;
  --rc-color-brand-orange:       #e2a829;
  --rc-color-brand-purple:       #7b5ea7;   /* optional */

  --rc-color-brand-white:        #ffffff;
  --rc-color-brand-white-rgb:    255, 255, 255; /* white as R,G,B for rgb()/alpha */

  /* ============================================================
     TEXT & SURFACE
     ============================================================ */
  --rc-color-text:               #3b3b3b;   /* body text */
  --rc-color-text-muted:         #707070;   /* secondary / muted text */
  --rc-color-gray-dark:          #646464;   /* dark UI text */
  --rc-color-slate:              #333F48;   /* dark slate: top utility bar background */
  --rc-color-border:             #d0d0d0;   /* default borders */
  --rc-color-surface-muted:      #f0f0f1;   /* light-grey surface: tile bars, subtle panels */

  /* ============================================================
     SPACING & LAYOUT
     ============================================================ */
  --rc-paragraph-spacing:        clamp(1rem, 0.5rem + 2vw, 2rem);  /* fluid vertical section padding (mobile→desktop) */
  --rc-container-max-width:      1440px;    /* boxed content width (full-bleed re-box) */

  /* Border radii */
  --rc-radius-sm:    6px;       /* small UI: tiles, inputs, cards */
  --rc-radius-pill:  999px;     /* fully rounded: pill buttons */

  /* Motion / transition timing */
  --rc-transition-fast: 0.15s;  /* hovers, small state changes */
  --rc-transition-base: 0.2s;   /* default UI transitions */

  /* ============================================================
     TYPOGRAPHY — sizes (fluid)
     ============================================================ */
  --rc-font-size-base:  clamp(17px, calc(16px + 0.3vw), 19px);
  --rc-font-size-3xl:   clamp(24px, calc(22px + 0.8vw), 30px);

  --rc-text-body:        var(--rc-font-size-base);
  --rc-text-heading-sm:  clamp(20px, calc(19px + 0.5vw), 24px);
  --rc-text-heading-md:  clamp(22px, calc(20px + 0.6vw), 26px);
  --rc-text-heading-lg:  clamp(24px, calc(22px + 0.8vw), 30px);
  --rc-text-heading-xl:  clamp(28px, calc(26px + 1.2vw), 38px);
  --rc-text-caption:     clamp(13px, calc(12px + 0.2vw), 14px);

  /* Weights */
  --rc-font-weight-light:    300;
  --rc-font-weight-medium:   500;
  --rc-font-weight-semibold: 600;
  --rc-font-weight-bold:     700;

  /* Line heights */
  --rc-line-height-tight:    1.2;
  --rc-line-height-snug:     1.35;
  --rc-line-height-relaxed:  1.8;
  --rc-line-height-loose:    2;

  /* Letter spacing */
  --rc-letter-spacing-wider:   0.05em;
  --rc-letter-spacing-widest:  0.1em;
}