/* =============================================================================
   Regio Systems — Design Tokens
   Source of truth: regio-business/strategy/brand-guidelines
     02-color-system · 03-typography-system · 07-iconography (radius) · 10-layout-spacing
   Public marketing site only. Portal-only functional colors are intentionally
   excluded (using them in marketing is a brand violation).
   ========================================================================== */

:root {
  /* ---- Primary palette (02) ------------------------------------------- */
  --color-deep-navy:    #0A2540;
  --color-regio-blue:   #1B4F8A;
  --color-horizon-blue: #3A80D2;
  --color-regio-red:    #C8102E;   /* accent only — max 1 per page, never hero/footer */
  --color-off-white:    #F5F6F8;

  /* ---- Secondary / surface palette (02) ------------------------------- */
  --color-surface-dark: #1C2330;
  --color-slate:        #2D3748;
  --color-steel-gray:   #64748B;
  --color-cool-gray:    #E2E8F0;
  --color-blue-tint:    #EEF4FF;
  --color-white:        #FFFFFF;

  /* ---- CTA button (02 — Website CTA) ---------------------------------- */
  --cta-bg:            #1B4F8A;
  --cta-border:        #3A80D2;
  --cta-text:          #FFFFFF;
  --cta-bg-hover:      #2563A8;
  --cta-border-hover:  #5B9FE8;

  /* logo arc tints (06) */
  --logo-arc-light-1:  #D4E8F8;
  --logo-arc-light-2:  #A4C8EE;
  --logo-arc-light-3:  #C2DDF5;
  --logo-arc-navy-mid: #4F8FD8;

  /* ---- Typography (03) ------------------------------------------------ */
  --font-logo:    'Nunito', sans-serif;                 /* logo wordmark ONLY */
  --font-display: 'DM Serif Display', Georgia, serif;   /* display headlines, 1/page max */
  --font-body:    'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  /* ---- Spacing scale — 4px base (10) ---------------------------------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-8:  48px;
  --space-10: 64px;
  --space-12: 96px;
  --space-16: 128px;

  /* ---- Layout (10) ---------------------------------------------------- */
  --container-max: 1600px;   /* widened from 1200 (2026-06-24 review): ~80% of a 1080p/1440p
                                screen, full-width on laptops. Text blocks keep their own
                                narrower max-widths (.measure/.section-head) for readability. */
  --gutter:        var(--space-6);   /* 32px desktop; 16px mobile via media query */
  --outer-margin:  var(--space-8);   /* 48px desktop */

  /* ---- Corner radius (07) --------------------------------------------- */
  --radius-card:   8px;
  --radius-btn:    8px;
  --radius-input:  6px;
  --radius-badge:  4px;
  --radius-modal:  12px;

  /* ---- Borders / lines (07) ------------------------------------------- */
  --line-standard: 1px;
  --line-emphasis: 1.5px;
  --line-heavy:    3px;

  /* ---- Elevation — shadow ceiling per 07 (no heavier than this) ------- */
  --shadow-card:  0 2px 8px rgba(10, 37, 64, 0.08);
  --shadow-modal: 0 12px 40px rgba(10, 37, 64, 0.28);

  /* ---- Motion (07 / 09) ----------------------------------------------- */
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:    cubic-bezier(0, 0, 0.2, 1);
  --ease-in:     cubic-bezier(0.4, 0, 1, 1);
  --dur-hover:   120ms;
  --dur-ui:      200ms;
  --dur-enter:   250ms;
  --dur-exit:    150ms;

  /* ---- Photo treatment overlay (08) ----------------------------------- */
  --photo-overlay: linear-gradient(
    to right,
    rgba(10, 37, 64, 0.82) 0%,
    rgba(10, 37, 64, 0.55) 55%,
    rgba(10, 37, 64, 0) 100%
  );
}