:root {
  /* Primary background colors */
  --bg-start: #110034;
  --bg-mid: #1a0052;
  --bg-end: #2d0070;

  /* Named gradients */
  --bg-gradient: linear-gradient(135deg, var(--bg-start), var(--bg-mid), var(--bg-end));
  --btn-gradient: linear-gradient(135deg, var(--accent-blue), var(--accent-blue-2));
  --btn-gradient-hover: linear-gradient(135deg, var(--accent-blue-2), var(--accent-blue-dark));
  /*
    Header gradient composed of two layers:
     1) a semi-transparent square drop-shadow near the bottom (sharp dropoff)
     2) the striped header gradient with a fully transparent top so page content shows through
  */
  --header-gradient: 
    /* top layer: sharp semi-transparent black strip near bottom */
    linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 90%, rgba(0,0,0,0.5) 90%, rgba(0,0,0,0) 99%),
    /* bottom layer: striped header gradient with transparent start and transparent end */
    linear-gradient(0deg, transparent 10%, var(--accent-yellow) 11%, var(--accent-yellow) 11.5%, var(--black) 12%, var(--accent-yellow) 12.5%, var(--accent-yellow) 17.5%, var(--black) 18%, var(--accent-yellow) 18.5%, var(--accent-yellow) 19%, var(--accent-navy) 20%, var(--accent-navy) 80%, var(--accent-yellow) 81%, var(--accent-yellow) 81.5%, var(--black) 82%, var(--accent-yellow) 82.5%, var(--accent-yellow) 87.5%, var(--black) 88%, var(--accent-yellow) 88.5%, var(--accent-yellow) 89%, transparent 90%);

  /* Page surfaces & text */
  --page-bg: #302830;
  --text: #e5e5e5;
  --muted: #d7d7d7;

  /* Accents */
  --accent-yellow: #f7de24;
  --accent-blue: #4fc3f7;
  --accent-blue-2: #29b6f6;
  --accent-blue-dark: #0288d1;
  --accent-navy: #004c83;

  /* Glassmorphism helpers */
  --glass-weak: rgba(96, 0, 160, 0.1);
  --glass-strong: rgba(96, 0, 160, 0.15);

  /* Role palette */
  --role-admin-start: #dc2626;
  --role-admin-end: #b91c1c;
  --role-ceo-start: #f59e0b;
  --role-ceo-end: #d97706;
  --role-director-start: #7c3aed;
  --role-director-end: #6d28d9;
  --role-member-start: #2563eb;
  --role-member-end: #1d4ed8;
  --role-applicant-start: #6b7280;
  --role-applicant-end: #4b5563;
  --role-public-start: #d1d5db;
  --role-public-end: #9ca3af;

  /* Utility */
  --white: #ffffff;
  --black: #000000;
}
