:root {
  /* Base */
  --color-white:      #FBFAF8;
  --color-grey:       #BABABA;
  --color-dark-grey:  #2D2D2D;

  /* Enactus Brand */
  --color-yellow:     #FFC23C;
  --color-blue:       #232D39;

  /* Departments — main colour */
  --color-dept-marketing:              #00CCBB;
  --color-dept-operations-innovation:  #0040FF;
  --color-dept-it:                     #E04001;
  --color-dept-finance-relations:      #F00056;
  --color-dept-hr-events:              #CC00FF;

  /* Departments — hero gradient (used as text fill on department pages) */
  --gradient-dept-marketing:             linear-gradient(135deg, #00CC66, #00CCBB, #0088CC);
  --gradient-dept-operations-innovation: linear-gradient(135deg, #00AAFF, #0040FF, #5533FF);
  --gradient-dept-it:                    linear-gradient(135deg, #FF9300, #CE1002);
  --gradient-dept-finance-relations:     linear-gradient(135deg, #CE008A, #FF003C);
  --gradient-dept-hr-events:             linear-gradient(135deg, #8E40A1, #D500FF, #CE0078);

  /* Surfaces */
  --color-cream:        #F5F2EC;                 /* section--cream */
  --color-overlay-navy: #202D3A;                 /* hero/gradient overlay (Figma) */
  --color-hover:        #f5f5f5;                 /* dropdown hover */
  --color-yellow-tint:  rgba(255, 194, 60, 0.20); /* support section bg */

  /* Borders / overlays */
  --border-dark:         rgba(0, 0, 0, 0.10);
  --border-dark-soft:    rgba(0, 0, 0, 0.08);
  --border-on-dark:      rgba(255, 255, 255, 0.20);
  --border-on-dark-soft: rgba(255, 255, 255, 0.10);

  /* Text on dark backgrounds */
  --text-on-dark:        rgba(255, 255, 255, 0.80);
  --text-on-dark-muted:  rgba(255, 255, 255, 0.60);

  /* Hero overlay — left-dark gradient for project & department hero images */
  --gradient-hero-overlay: linear-gradient(90deg, rgba(35, 45, 57, 0.90) 0%, rgba(35, 45, 57, 0.90) 57%, rgba(35, 45, 57, 0.20) 98%);

  /* Shadows */
  --shadow-sm: 0 4px 16px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.10);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.10);

  /* Spacing */
  --space-xs:  0.5rem;
  --space-sm:  1rem;
  --space-md:  2rem;
  --space-lg:  4rem;
  --space-xl:  8rem;

  /* Semantic spacing */
  --head-gap: var(--space-md); /* section heading block → the content below it */
  --support-card-padding: calc(var(--space-sm) + var(--space-xs));
  --header-height: 80px;
  --header-logo-height: calc(var(--space-lg) - var(--space-xs));
  --header-join-font-size: var(--text-base);

  /* Application announcement */
  --application-banner-duration: 32s;

  /* Subtle call-to-action pulse */
  --button-pulse-duration: 3s;
  --button-pulse-scale: 1.025;

  /* Delayed loading feedback */
  --color-loading-surface: #EEEEE7;
  --loading-pulse-duration: 1.5s;
  --loading-logo-width: 9vw;
  --loading-logo-mobile-width: 20vw;
  --loading-logo-max-width: 150px;
  --loading-layer: 300;

  /* Typography */
  --font-sans: 'Roboto', system-ui, sans-serif;
  --font-mono: 'Roboto Mono', ui-monospace, monospace;
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --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-6xl:  3.75rem;

  /* Display type (hero headlines) */
  --text-display-lg: clamp(3rem, 6vw, 88px);   /* home hero h1 */
  --text-display-md: clamp(2.5rem, 6vw, 72px); /* project hero h1 */

  /* Label (mono) — single source for the repeated label pattern */
  --label-font:    var(--font-mono);
  --label-size:    12px;
  --label-weight:  500;
  --label-spacing: 0.96px;

  /* Border radius */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-pill: 999px;

  /* Layout widths */
  --max-width:      1200px;
  --max-width-wide: 1320px; /* project section content */
  --max-width-contact: 620px;
  --board-portrait-width: 192px;
  --board-portrait-width-mobile: 160px;
  --timeline-portrait-ratio: 4 / 5;
}