/* ============================================================
   Ray Bridge — Design Tokens
   Brand: Ray Bridge construction machinery (blue / orange)
   Type:  Barlow Condensed (display) + Inter (body)
   NOTE: values here are the single source of truth.
   ============================================================ */

:root {
  /* ---- Brand palette (from Ray Bridge logo — do not change) ---- */
  --rb-blue:        #1568A7;
  --rb-blue-dark:   #0A3F6B;
  --rb-blue-deep:   #082E4F;   /* darkest panel / footer */
  --rb-blue-light:  #398CC4;
  --rb-blue-tint:   #E7F0F7;   /* light blue surface */
  --rb-orange:      #F57B0A;
  --rb-orange-dark: #D96400;
  --rb-orange-tint: #FDF1E3;

  /* ---- Neutrals ---- */
  --rb-ink:      #14202B;
  --rb-text:     #4E5B66;
  --rb-muted:    #6F7B85;
  --rb-line:     #DCE3E8;
  --rb-line-soft:#E8EDF1;
  --rb-surface:  #F3F6F8;
  --rb-white:    #FFFFFF;

  /* ---- Semantic ---- */
  --c-primary:        var(--rb-blue);
  --c-primary-dark:   var(--rb-blue-dark);
  --c-accent:         var(--rb-orange);
  --c-accent-hover:   var(--rb-orange-dark);
  --c-text:           var(--rb-text);
  --c-heading:        var(--rb-ink);
  --c-bg:             var(--rb-white);
  --c-bg-alt:         var(--rb-surface);
  --c-border:         var(--rb-line);
  --c-focus:          #2B7CD3;
  --c-success:        #1E7A46;
  --c-success-bg:     #E9F6EE;
  --c-error:          #B3261E;
  --c-error-bg:       #FBEDEC;

  /* ---- Typography ---- */
  --font-display: "Barlow Condensed", "Arial Narrow", "Helvetica Neue", sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Fluid type scale (mobile-first) */
  --fs-display: clamp(2.4rem, 1.6rem + 3.6vw, 4.25rem);   /* hero H1 */
  --fs-h1:      clamp(2.1rem, 1.5rem + 2.6vw, 3.25rem);   /* page H1 */
  --fs-h2:      clamp(1.65rem, 1.25rem + 1.7vw, 2.4rem);
  --fs-h3:      clamp(1.3rem, 1.1rem + 0.9vw, 1.65rem);
  --fs-h4:      1.15rem;
  --fs-body-lg: 1.0625rem;
  --fs-body:    1rem;
  --fs-sm:      0.9375rem;
  --fs-xs:      0.8125rem;
  --fs-eyebrow: 0.75rem;      /* uppercase label */

  --lh-tight:  1.08;
  --lh-snug:   1.25;
  --lh-normal: 1.65;
  --lh-relaxed:1.75;

  --ls-eyebrow: 0.14em;
  --ls-plate:   0.1em;        /* spec-plate labels */
  --ls-display: 0.005em;

  /* ---- Layout ---- */
  --container:      1320px;
  --container-narrow: 920px;  /* article / readable text */
  --container-text: 720px;
  --gutter: 1.25rem;
  --section-y:  clamp(3.25rem, 2.2rem + 3.6vw, 5.5rem);
  --section-y-lg:clamp(4rem, 2.8rem + 4.5vw, 6.75rem);

  /* ---- Spacing scale (4px base) ---- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 2.5rem;
  --sp-8: 3rem;
  --sp-9: 4rem;
  --sp-10: 5rem;

  /* ---- Radius / shadow / stroke ---- */
  --radius-sm: 3px;
  --radius-md: 5px;
  --radius-lg: 8px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(20, 32, 43, 0.06);
  --shadow-md: 0 4px 14px rgba(20, 32, 43, 0.09);
  --shadow-lg: 0 12px 34px rgba(10, 63, 107, 0.14);
  --shadow-plate: inset 0 0 0 1px var(--rb-line);

  /* ---- Motion ---- */
  --t-fast:  150ms cubic-bezier(0.2, 0, 0.2, 1);
  --t-base:  220ms cubic-bezier(0.2, 0, 0.2, 1);
  --t-slow:  320ms cubic-bezier(0.2, 0, 0.2, 1);

  /* ---- Z-index ---- */
  --z-header:    60;
  --z-mega:      55;
  --z-drawer:    70;
  --z-scrim:     65;
  --z-actionbar: 50;

  /* ---- Component metrics ---- */
  --header-h:        78px;
  --header-h-scroll: 62px;
  --control-h:       46px;
}