/* =============================================================
   RW Institute Design Tokens
   Dark-first. Web/HTML/email version — Plus Jakarta Sans + Inter.
   For Word/PDF materials, swap all font-families to 'Avenir Next Condensed'.
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/icon?family=Material+Symbols+Outlined');

:root {
  /* ---------- Core brand colours ---------- */
  --rwi-primary:   #F15A2E;   /* orange — CTAs, accents, section labels */
  --rwi-secondary: #89d1e3;   /* cyan — supporting accent, data viz */
  --rwi-tertiary:  #ffb877;   /* warm peach — tertiary data */
  --rwi-background:#0B1D32;   /* page background, default dark surface */

  /* ---------- Surface scale (dark, lightest to darkest) ---------- */
  --rwi-surface-lowest: #071424;   /* footer, deepest */
  --rwi-surface-low:    #0A1C31;   /* recessed panels */
  --rwi-surface:        #0B1D32;   /* default bg */
  --rwi-surface-container:      #0D253F;  /* cards, panels */
  --rwi-surface-container-high: #132D4A;  /* hover, elevated */
  --rwi-surface-bright:         #2a3a50;  /* maximum emphasis */

  /* ---------- Text scale (on dark) ---------- */
  --rwi-text:          #ffffff;   /* headlines */
  --rwi-on-surface:    #d3e3ff;   /* body */
  --rwi-on-surface-variant: #c4c6cd; /* secondary body */
  --rwi-muted:         #94a3b8;   /* descriptive */
  --rwi-subtle:        #64748b;   /* footer links */
  --rwi-faint:         #475569;   /* copyright, fine print */

  /* ---------- Inverse (light mode, Word/PDF) ---------- */
  --rwi-inverse-surface:     #ffffff;
  --rwi-inverse-surface-alt: #f8fafc;
  --rwi-inverse-text:        #0B1D32;
  --rwi-inverse-on-surface:  #213147;
  --rwi-inverse-primary:     #b12e00; /* for text on light; btns stay #F15A2E */

  /* ---------- Borders ---------- */
  --rwi-border-subtle: rgba(255, 255, 255, 0.05);
  --rwi-border-accent: rgba(241, 90, 46, 0.1);
  --rwi-outline:         #44474d;
  --rwi-outline-variant: #25364c;

  /* ---------- Status ---------- */
  --rwi-error:           #ffb4ab;
  --rwi-error-container: #93000a;

  /* ---------- Gradients ---------- */
  --rwi-gradient-orange: linear-gradient(45deg, #F15A2E, #F59328);
  --rwi-gradient-hero: linear-gradient(90deg,
    #F15A2E 0%, #E8734A 25%, #C49A7A 45%,
    #8AADCC 65%, #5BA8D4 85%, #4AABE0 100%);
  --rwi-gradient-section-dark: linear-gradient(180deg, #0B1D32 0%, #081629 100%);

  /* ---------- Effects ---------- */
  --rwi-glass-bg:        rgba(19, 45, 74, 0.4);
  --rwi-glass-bg-hover:  rgba(19, 45, 74, 0.6);
  --rwi-glass-bg-subtle: rgba(26, 43, 64, 0.4);
  --rwi-glass-blur: blur(24px);

  --rwi-shadow-button:  0 10px 15px -3px rgba(241, 90, 46, 0.2);
  --rwi-shadow-overlay: 0 25px 50px -12px rgba(0, 0, 0, 0.4);

  --rwi-constellation: radial-gradient(
    circle, rgba(241, 90, 46, 0.08) 1.5px, transparent 1.5px);
  --rwi-constellation-size: 48px 48px;

  --rwi-constellation-subtle: radial-gradient(
    circle, rgba(68, 71, 77, 0.15) 1px, transparent 1px);
  --rwi-constellation-subtle-size: 40px 40px;

  /* ---------- Border radii ---------- */
  --rwi-radius-xs: 0.25rem;   /* 4px */
  --rwi-radius-sm: 0.5rem;    /* 8px */
  --rwi-radius-md: 0.75rem;   /* 12px */
  --rwi-radius-lg: 1rem;      /* 16px */
  --rwi-radius-xl: 1.5rem;    /* 24px */
  --rwi-radius-pill: 9999px;

  /* ---------- Spacing (8-pt base) ---------- */
  --rwi-space-1: 0.25rem;
  --rwi-space-2: 0.5rem;
  --rwi-space-3: 0.75rem;
  --rwi-space-4: 1rem;
  --rwi-space-5: 1.25rem;
  --rwi-space-6: 1.5rem;
  --rwi-space-8: 2rem;
  --rwi-space-10: 2.5rem;
  --rwi-space-12: 3rem;
  --rwi-space-16: 4rem;
  --rwi-space-20: 5rem;
  --rwi-space-24: 6rem;
  --rwi-space-32: 8rem;

  /* ---------- Type families ---------- */
  --rwi-font-display: 'Plus Jakarta Sans', system-ui, sans-serif;
  --rwi-font-body:    'Inter', system-ui, sans-serif;
  --rwi-font-icon:    'Material Symbols Outlined';
  /* Print / Word equivalent: */
  --rwi-font-print:   'Avenir Next Condensed', 'Avenir Next', system-ui, sans-serif;

  /* ---------- Type sizes ---------- */
  --rwi-size-hero:    clamp(3rem, 6vw, 5.5rem);   /* 5xl–7xl */
  --rwi-size-h1:      clamp(2.25rem, 4vw, 3rem);  /* 3xl–4xl */
  --rwi-size-h2:      1.875rem; /* 30px */
  --rwi-size-h3:      1.5rem;   /* 24px */
  --rwi-size-h4:      1.25rem;  /* 20px */
  --rwi-size-body-lg: 1.125rem; /* 18px */
  --rwi-size-body:    1rem;     /* 16px */
  --rwi-size-body-sm: 0.875rem; /* 14px */
  --rwi-size-label:   0.625rem; /* 10px — section labels, footer headings */

  /* ---------- Aliases for skill-protocol compatibility ---------- */
  --rwi-text-primary:             var(--rwi-text);
  --rwi-text-body:                var(--rwi-on-surface);
  --rwi-surface-container-lowest: var(--rwi-surface-lowest);
  --rwi-surface-container-low:    var(--rwi-surface-low);

  /* ---------- Animations ---------- */
  --rwi-transition-color: color 150ms ease;
  --rwi-transition-all:   all 200ms ease;
  --rwi-transition-transform: transform 200ms ease;
}

/* =============================================================
   Semantic typography
   ============================================================= */

.rwi-hero {
  font-family: var(--rwi-font-display);
  font-weight: 800;
  font-size: var(--rwi-size-hero);
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--rwi-text);
}

.rwi-h1 {
  font-family: var(--rwi-font-display);
  font-weight: 700;
  font-size: var(--rwi-size-h1);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--rwi-text);
}

.rwi-h2 {
  font-family: var(--rwi-font-display);
  font-weight: 700;
  font-size: var(--rwi-size-h2);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--rwi-text);
}

.rwi-h3 {
  font-family: var(--rwi-font-display);
  font-weight: 700;
  font-size: var(--rwi-size-h3);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--rwi-text);
}

.rwi-h4 {
  font-family: var(--rwi-font-display);
  font-weight: 700;
  font-size: var(--rwi-size-h4);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--rwi-text);
}

.rwi-body-lg {
  font-family: var(--rwi-font-body);
  font-weight: 300;
  font-size: var(--rwi-size-body-lg);
  line-height: 1.7;
  color: var(--rwi-on-surface);
}

.rwi-body {
  font-family: var(--rwi-font-body);
  font-weight: 300;
  font-size: var(--rwi-size-body);
  line-height: 1.7;
  color: var(--rwi-on-surface);
}

.rwi-body-sm {
  font-family: var(--rwi-font-body);
  font-weight: 300;
  font-size: var(--rwi-size-body-sm);
  line-height: 1.6;
  color: var(--rwi-on-surface-variant);
}

.rwi-label {
  font-family: var(--rwi-font-body);
  font-weight: 400;
  font-size: var(--rwi-size-body-sm);
  color: var(--rwi-on-surface);
}

.rwi-section-label {
  display: block;
  font-family: var(--rwi-font-display);
  font-weight: 700;
  font-size: var(--rwi-size-label);
  color: var(--rwi-primary);
  text-transform: uppercase;
  letter-spacing: 0.4em;
}

.rwi-nav-link {
  font-family: var(--rwi-font-display);
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: -0.01em;
  color: #cbd5e1;
  text-decoration: none;
  transition: var(--rwi-transition-color);
}
.rwi-nav-link:hover { color: var(--rwi-text); }
.rwi-nav-link.is-active {
  color: var(--rwi-primary);
  border-bottom: 2px solid var(--rwi-primary);
}

.rwi-footer-heading {
  font-family: var(--rwi-font-body);
  font-weight: 700;
  font-size: var(--rwi-size-label);
  color: var(--rwi-text);
  text-transform: uppercase;
  letter-spacing: 0.2em;
}

.rwi-footer-link {
  font-family: var(--rwi-font-body);
  font-weight: 300;
  font-size: var(--rwi-size-body-sm);
  color: var(--rwi-subtle);
  text-decoration: none;
  transition: var(--rwi-transition-color);
}
.rwi-footer-link:hover { color: var(--rwi-primary); }

.rwi-copyright {
  font-family: var(--rwi-font-body);
  font-weight: 400;
  font-size: var(--rwi-size-label);
  color: var(--rwi-faint);
  text-transform: uppercase;
  letter-spacing: 0.2em;
}

/* Hero gradient text */
.rwi-hero-gradient-text {
  background: var(--rwi-gradient-hero);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

/* =============================================================
   Component primitives
   ============================================================= */

.rwi-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--rwi-gradient-orange);
  color: var(--rwi-text);
  font-family: var(--rwi-font-display);
  font-weight: 700;
  font-size: 0.875rem;
  border: none;
  border-radius: var(--rwi-radius-pill);
  padding: 0.625rem 1.5rem;
  box-shadow: var(--rwi-shadow-button);
  cursor: pointer;
  transition: var(--rwi-transition-transform);
  text-decoration: none;
}
.rwi-btn-primary:hover { transform: scale(1.05); }

.rwi-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: transparent;
  color: var(--rwi-text);
  font-family: var(--rwi-font-display);
  font-weight: 700;
  font-size: 0.875rem;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--rwi-radius-pill);
  padding: 0.625rem 1.5rem;
  cursor: pointer;
  transition: var(--rwi-transition-all);
  text-decoration: none;
}
.rwi-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.3);
}

.rwi-card {
  background: var(--rwi-glass-bg);
  backdrop-filter: var(--rwi-glass-blur);
  -webkit-backdrop-filter: var(--rwi-glass-blur);
  border: 1px solid var(--rwi-border-accent);
  padding: 2rem;
  border-radius: var(--rwi-radius-lg);
  transition: var(--rwi-transition-all);
}
.rwi-card:hover { background: var(--rwi-glass-bg-hover); }

.rwi-glass-panel {
  background: var(--rwi-glass-bg);
  backdrop-filter: var(--rwi-glass-blur);
  -webkit-backdrop-filter: var(--rwi-glass-blur);
  border: 1px solid var(--rwi-border-accent);
  border-radius: var(--rwi-radius-lg);
}

.rwi-constellation-bg {
  background-image: var(--rwi-constellation);
  background-size: var(--rwi-constellation-size);
}

.rwi-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.75rem;
  border-radius: var(--rwi-radius-pill);
  font-family: var(--rwi-font-body);
  font-weight: 500;
  font-size: 0.75rem;
  background: rgba(241, 90, 46, 0.1);
  color: var(--rwi-primary);
  border: 1px solid rgba(241, 90, 46, 0.2);
}

/* Global body defaults */
.rwi-root {
  background: var(--rwi-background);
  color: var(--rwi-on-surface);
  font-family: var(--rwi-font-body);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
}