:root {
  /* Purple scale */
  --color-purple-darkest: #4a148c;
  --color-purple-dark: #6a1b9a;
  --color-purple-medium: #7e57c2;
  --color-purple-light: #b39ddb;
  --color-purple-lightest: #d1c4e9;
  --color-purple-pale: #CCBEE7;
  
  /* Blue scale */
  --color-blue-dark: #1565c0;
  --color-blue-medium: #42a5f5;
  --color-blue-badge: #5C9ED1;
  
  /* Grayscale */
  --color-black: #000000;
  --color-white: #ffffff;
  --color-gray-light: #f5f5f5;
  --color-gray-medium: #cccccc;
  --color-gray-dark: #333333;
  
  /* Semantic colors */
  --bg-body: #BEC5E7;
  --bg-surface: white;
  --bg-header: var(--color-purple-pale);
  --bg-nav: var(--color-purple-lightest);
  --bg-aside: var(--color-purple-lightest);
  
  --text-primary: var(--color-purple-darkest);
  --text-secondary: var(--color-purple-dark);
  --text-link: var(--color-blue-dark);
  --text-link-hover: var(--color-blue-medium);
  
  --border-primary: var(--color-purple-light);
  --border-secondary: var(--color-purple-lightest);
  --border-width: 1px;
  --border-width-thick: 2px;
  
  --accent-comments: var(--color-blue-medium);
  --accent-complete: var(--color-blue-dark);
  
  /* Typography */
  --font-size-xs: 10px;
  --font-size-sm: 11px;
  --font-size-base: 12px;
  --font-size-md: 14px;
  --font-size-lg: 15px;
  --font-size-xl: 16px;
  --font-size-2xl: 18px;
  --font-size-3xl: 24px;
  
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  
  --line-height-tight: 1.3;
  --line-height-normal: 1.4;
  --line-height-relaxed: 1.6;
  --line-height-loose: 1.7;
  
  /* Spacing */
  --spacing-xs: 2px;
  --spacing-sm: 4px;
  --spacing-md: 6px;
  --spacing-lg: 8px;
  --spacing-xl: 16px;
  --spacing-2xl: 20px;
  --spacing-3xl: 32px;
  
  --padding-xs: 2px;
  --padding-sm: 4px;
  --padding-md: 8px;
  --padding-lg: 12px;
  --padding-xl: 16px;
  --padding-2xl: 24px;
  
  --width-nav: 200px;
  --width-aside: 250px;
  --width-readable: 700px;
  --gap-grid: 16px;
}

/* ============================================
   RESET
   ============================================ */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ============================================
   BASIC PAGE LAYOUT
   ============================================ */
.portal-page {
  display: grid;
  grid-template-columns: 160px 1fr 176px;
  grid-template-rows: auto auto 1fr auto;
  grid-template-areas:
    "header header header"
    "controls controls controls"
    "nav main aside"
    "footer footer footer";
  min-height: 100vh;
  background-color: var(--bg-body);
  color: var(--text-primary);
  font-size: var(--font-size-base);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  font-weight: var(--font-weight-light);
  line-height: var(--line-height-normal);
  gap: 0;
}

/* ============================================
   HEADER
   ============================================ */
header {
  grid-area: header;
  background: linear-gradient(to bottom, var(--bg-header), var(--color-purple-medium));
  border-bottom: var(--spacing-xs) solid var(--border-primary);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-xs) var(--spacing-lg);
}

header > div:first-child {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

header > div:last-child {
  display: flex;
  gap: var(--spacing-xs);
}

header img {
  width: 13px;
  height: 13px;
  vertical-align: middle;
}

header h1 {
  color: var(--color-white);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-light);
}

header button {
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: var(--color-white);
  padding: 0 var(--spacing-md);
  font-size: var(--font-size-base);
  cursor: pointer;
  font-weight: var(--font-weight-light);
}

header button:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* ============================================
   ACCESSIBILITY CONTROLS
   ============================================ */
.accessibility-controls {
  grid-area: controls;
  display: none;
  background: var(--color-white);
  padding: var(--spacing-md);
  border-bottom: var(--border-width) solid var(--border-primary);
}

.accessibility-controls h2 {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-medium);
  margin-bottom: var(--spacing-md);
}

.accessibility-controls button {
  background: var(--bg-header);
  border: var(--border-width) solid var(--border-primary);
  color: var(--text-primary);
  padding: var(--spacing-sm) var(--spacing-lg);
  font-size: var(--font-size-base);
  cursor: pointer;
  margin-right: var(--spacing-sm);
}

.accessibility-controls button:hover {
  background: var(--color-purple-light);
}

/* ============================================
   SHARED STYLES
   ============================================ */

/* Card/section headers (used in nav, main, aside) */
nav h3,
aside h2,
aside nav h3,
main h2 {
  background: linear-gradient(to top, var(--bg-header), var(--bg-surface));
  border-bottom: 1px solid var(--border-primary);
  padding: var(--spacing-xs) var(--spacing-md);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-normal);
  color: var(--text-primary);
  margin: 0;
}

/* Override gradient direction for main headers */
main h2 {
  background: linear-gradient(to bottom, var(--bg-surface), var(--bg-header));
}

/* Thicker border for primary headers */
nav h2,
aside h2 {
  border-bottom: var(--spacing-xs) solid var(--border-primary);
}

/* Navigation lists (no bullets, borders between items) */
nav ul,
aside nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

nav li,
aside nav li {
  border-bottom: 1px solid var(--border-secondary);
  padding: 0;
}

/* Navigation links (block display, padded, hover effect) */
nav a,
aside nav a {
  display: block;
  padding: var(--spacing-xs) var(--spacing-md);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-light);
  color: var(--text-primary);
  text-decoration: none;
}

nav a:hover,
aside nav a:hover {
  background: var(--border-secondary);
}

/* ============================================
   NAV (LEFT SIDEBAR)
   ============================================ */
nav {
  grid-area: nav;
  background: var(--bg-surface);
  border-right: var(--spacing-xs) solid var(--border-primary);
}

/* ============================================
   MAIN (CENTER CONTENT)
   ============================================ */
main {
  grid-area: main;
  padding: var(--spacing-md);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-md);
  align-content: start;
}

/* Base styles for all cards */
main > section,
main > article {
  border: var(--spacing-xs) solid var(--border-primary);
  background: var(--bg-surface);
}

main h3 {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-light);
  color: var(--text-primary);
}

main p {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  margin: 0;
  padding: var(--spacing-xs) var(--spacing-md);
}

/* TYPE 1: ARTICLE (static content with bullets or paragraphs) */
main > article ul {
  list-style: disc;
  margin: 0;
  padding: var(--spacing-xs) var(--spacing-md);
  padding-left: var(--spacing-2xl);
}

main > article ul li {
  border-bottom: none;
  padding: var(--spacing-xs) 0;
  font-size: var(--font-size-base);
}

/* TYPE 2: LINKER (clickable article items) */
main section article {
  padding: 0;
  border-bottom: 1px solid var(--border-secondary);
}

main section article:last-child {
  border-bottom: none;
}

main section article a {
  display: block;
  padding: var(--spacing-xs) var(--spacing-md);
  color: inherit;
  text-decoration: none;
}

main section article a:hover {
  background: var(--border-secondary);
}

main section article a h3 {
  color: var(--text-primary);
}

main section article a p {
  padding: var(--spacing-xs) 0;
}

/* ============================================
   ASIDE (RIGHT SIDEBAR)
   ============================================ */
aside {
  grid-area: aside;
  background: var(--bg-surface);
  border-left: var(--spacing-xs) solid var(--border-primary);
}

aside ul, aside section ul {
  list-style: none;
  margin: 0;
}

aside li, aside section li {
  border-bottom: 1px solid var(--border-secondary);
  padding: var(--spacing-xs) var(--spacing-sm);
  font-size: var(--font-size-base);
}

aside li:hover, aside section li:hover {
    background: var(--border-secondary)
}

aside a, aside section a {
  color: var(--text-primary);
  text-decoration: none;
}

aside a:hover, aside section a:hover {
  color: var(--text-secondary);
  text-decoration: none;
}

aside time, aside section time {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

/* ============================================
   FOOTER
   ============================================ */
footer {
  grid-area: footer;
  background: var(--border-secondary);
  border-top: var(--spacing-xs) solid var(--border-primary);
  padding: 0 var(--spacing-lg);
  display: flex;
  justify-content: space-between;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-light);
}

/* ============================================
   MOBILE RESPONSIVENESS
   ============================================ */
@media (max-width: 768px) {
  .portal-page {
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "controls"
      "main"
      "nav"
      "aside"
      "footer";
  }
  
  nav, aside {
    border: none;
    border-top: var(--spacing-xs) solid var(--border-primary);
  }
  
  main {
    grid-template-columns: 1fr;
  }
}