:root {
  /* ── Core brand ── */
  --c-royal:   #213784;
  --c-steel:   #7686bc;
  --c-white:   #FFFFFF;
  --c-forest:  #1a1c1d;
  --c-olive:   #536259;

  /* ── Derived tints / shades ── */
  --c-royal-light: #3b4f9d;
  --c-royal-dark:  #1a2b6b;
  --c-royal-tint:  #eef2ff;
  --c-steel-light: #b7c4ff;
  --c-forest-light:#2a2d2f;
  --c-forest-dark: #141617;
  --c-olive-light: #647063;

  /* ── RGB channels ── */
  --c-royal-rgb:       33, 55, 132;
  --c-white-rgb:       255, 255, 255;
  --c-surface-rgb:     251, 248, 255;
  --c-steel-light-rgb: 183, 196, 255;

  /* ── Surfaces ── */
  --c-surface:           #fbf8ff;
  --c-surface-alt:       #f8f9fa;
  --c-surface-container: #efedf4;
  --c-icon-tile:         #dfe4f2;
  --c-section-alt:       #E9F2F7;
  --c-cabling-card:      #24284D;
  --bg-industry-card:    linear-gradient(155deg, var(--c-royal-light) 0%, var(--c-forest) 90%);
  --c-surface-blur:      rgba(var(--c-surface-rgb), 0.85);
  --c-surface-elevated:  rgba(var(--c-white-rgb), 0.97);

  /* ── Neutrals ── */
  --c-off-white: #f8f9fa;
  --c-gray-50:   #f4f2f9;
  --c-gray-100:  #e3e1e9;
  --c-gray-300:  #c5c5d3;
  --c-gray-400:  #70717d;
  --c-gray-500:  #454651;
  --c-gray-600:  #3d3e48;
  --c-gray-700:  #33343d;
  --c-gray-900:  #1b1b20;

  --c-outline:         #757682;
  --c-outline-variant: #c5c5d3;

  /* ── Semantic states ── */
  --c-success:        #245c35;
  --c-success-border: #6a9f7b;
  --c-success-bg:     #edf7f0;
  --c-danger:         #8b1e1e;
  --c-danger-border:  #c56b6b;
  --c-danger-bg:      #fff2f2;

  /* ── Alpha layers on dark surfaces ── */
  --on-dark-fill:          rgba(var(--c-white-rgb), 0.05);
  --on-dark-fill-raised:   rgba(var(--c-white-rgb), 0.08);
  --on-dark-fill-hover:    rgba(var(--c-white-rgb), 0.12);
  --on-dark-grid:          rgba(var(--c-white-rgb), 0.05);
  --on-dark-hairline:      rgba(var(--c-white-rgb), 0.10);
  --on-dark-border:        rgba(var(--c-white-rgb), 0.15);
  --on-dark-border-strong: rgba(var(--c-white-rgb), 0.70);
  --on-dark-text:          rgba(var(--c-white-rgb), 0.82);
  --on-dark-text-dim:      rgba(var(--c-white-rgb), 0.60);
  --on-dark-accent-fill:   rgba(var(--c-steel-light-rgb), 0.12);
  --on-dark-accent-border: rgba(var(--c-steel-light-rgb), 0.30);

  /* ── Alpha layers on light surfaces ── */
  --on-light-royal:      rgba(var(--c-royal-rgb), 0.06);
  --on-light-royal-grid: rgba(var(--c-royal-rgb), 0.035);
  --on-light-royal-ring: rgba(var(--c-royal-rgb), 0.25);

  /* ── Typography ── */
  --font-head: 'Space Grotesk', 'Trebuchet MS', sans-serif;
  --font-body: 'IBM Plex Sans', 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', 'Courier New', monospace;
  /* Emoji-first stack for icon glyphs. Without it the glyph is picked up from
     the body-font fallback chain, which renders some symbols (⚖ 🛡 🖥) in the
     monochrome text variant on Windows instead of the colour emoji. */
  --font-emoji: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;

  /* ── Type scale ── */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-nav:  0.9375rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;
  --text-5xl:  3rem;
  --text-hero: clamp(2.5rem, 6vw, 4rem);
  --text-display: clamp(3rem, 8vw, 5rem);
  /* Decorative glyph ramp — emoji icon tiles and inline stat figures */
  --text-glyph-sm: 1.6rem;   /* card + industry-card icon tiles */
  --text-glyph:    2rem;

  /* ── Spacing ── */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.25rem;
  --sp-6:  1.5rem;
  --sp-8:  2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;
  --sp-32: 8rem;

  /* ── Layout ── */
  --icon-tile:      56px;
  --icon-glyph:     28px;   /* 50% of the tile — optical centre of the square */
  --container:      1280px;
  --container-wide: 1280px;
  --gutter:         clamp(1rem, 4vw, 2rem);
  --section-pad:    clamp(2.5rem, 5vw, 4rem);

  /* ── Border / radius ── */
  --radius-sm: 2px;
  --radius:    4px;
  --radius-lg: 8px;
  --border:    1px solid var(--c-outline-variant);

  /* ── Shadows ── */
  --shadow-sm:     0 1px 3px rgba(27,27,32,0.06);
  --shadow:        0 4px 16px rgba(27,27,32,0.05);
  --shadow-lg:     0 10px 30px rgba(27,27,32,0.08);
  --shadow-royal:  0 10px 30px rgba(33,55,132,0.15);
  --shadow-forest: 0 10px 30px rgba(0,0,0,0.18);

  /* ── Motion ── */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring:cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-fast:  150ms;
  --t-base:  250ms;
  --t-slow:  400ms;

  /* ── Z-index ── */
  --z-nav:    100;
  --z-modal:  200;
  --z-tooltip: 300;
}