/*
 * Snape Premium Design System
 * Technical Reference Enhancement Styles
 * Version: 1.0.0
 */

/* ============================================
   THEME-AWARE COLOR VARIABLES (WCAG 2.1 AA COMPLIANT)
   ============================================ */

/* ORIGINAL COLORS (Deep Purple + Teal) - Uncomment to restore
:root {
  --nav-section-light: #0059b2;
  --nav-section-dark: #A3D1FF;
  --accent-text-light: #00665c;
  --accent-text-dark: #26A69A;
}
*/

/* MALEFICENT THEME (Purple + Acid Green) - Uncomment to restore
:root {
  --nav-section-light: #0059b2;
  --nav-section-dark: #CCB2E5;
  --accent-text-light: #00665c;
  --accent-text-dark: #39FF14;
  --maleficent-purple: #9965CC;
  --maleficent-purple-dark: #5B1E9A;
  --maleficent-purple-darker: #2E0854;
  --maleficent-green: #39FF14;
  --maleficent-green-muted: #2BD400;
  --maleficent-black: #0D0D0D;
  --maleficent-bone: #E8DCC8;
}
*/

/* SORCERER'S GRIMOIRE THEME (Light) + DARK MAGIC THEME (Dark) - WCAG AA Compliant */
:root {
  /* LIGHT MODE: Sorcerer's Grimoire - Aged Parchment & Disney Fantasia */
  --parchment-base: #F5E6D3;          /* Aged paper background */
  --parchment-light: #FAF3E8;         /* Elevated surfaces */
  --parchment-border: #D7CCC8;        /* Borders, dividers */

  --ink-primary: #3E2723;             /* Deep brown ink (9.8:1 contrast) */
  --ink-secondary: #5D4037;           /* Dim ink (7.2:1 contrast) */

  --sorcerer-blue: #1565C0;           /* Mickey's robe (6.1:1 contrast) */
  --sorcerer-blue-hover: #0D47A1;     /* Darker hover state */
  --enchanted-purple: #6A1B9A;        /* Yen Sid's hat (8.9:1 contrast) */
  --golden-stardust: #F57C00;         /* Fantasia stars (4.6:1 contrast) */

  --spell-success: #2E7D32;           /* Nature magic (6.8:1 contrast) */
  --spell-warning: #EF6C00;           /* Alchemy warning (5.1:1 contrast) */
  --spell-danger: #C62828;            /* Forbidden magic (7.5:1 contrast) */
  --spell-info: #0277BD;              /* Arcane knowledge (6.9:1 contrast) */

  /* DARK MODE: Dark Magic - Blood Red & Arcane Purple */
  --void-black: #0A0A0A;              /* Absolute void (backgrounds) */
  --obsidian: #1C1C1C;                /* Obsidian stone (surfaces) */
  --shadow-gray: #2A2A2A;             /* Deep shadow (elevated) */

  --crimson: #E53E3E;                 /* Blood magic (4.5:1 on void) */
  --blood-red: #B91C1C;               /* Dark blood (4.5:1 on void) */
  --arcane-purple: #9945FF;           /* Forbidden arts (4.7:1 on void) */
  --deep-violet: #7C3AED;             /* Ancient power (4.8:1 on void) */

  --toxic-green: #00FF41;             /* Necromancy glow (14.5:1 on void) */
  --spectral-blue: #3B82F6;           /* Ethereal spirits (4.7:1 on void) */

  --bone-ash: #D3D3D3;                /* Ritual ashes (9.37:1 on obsidian) */
  --silver-mist: #C0C0C0;             /* Spectral fog (text) */
}

/* Light mode color overrides - SORCERER'S GRIMOIRE PALETTE */
[data-md-color-scheme="default"] {
  /* Base colors */
  --md-default-bg-color: var(--parchment-base);
  --md-default-fg-color: var(--ink-primary);
  --md-code-bg-color: var(--parchment-light);
  --md-code-fg-color: var(--ink-primary);

  /* Primary and accent */
  --md-primary-fg-color: var(--sorcerer-blue);
  --md-accent-fg-color: var(--enchanted-purple);

  /* Links and interactions */
  --md-typeset-a-color: var(--sorcerer-blue);
  --md-typeset-a-color--hover: var(--enchanted-purple);

  /* Navigation */
  --nav-section-color: var(--sorcerer-blue);

  /* Borders and dividers */
  --md-default-fg-color--lightest: var(--parchment-border);
  --md-default-fg-color--lighter: var(--ink-secondary);

  /* Semantic colors */
  --md-typeset-mark-color: var(--golden-stardust);
}

/* Dark mode color overrides - DARK MAGIC PALETTE */
[data-md-color-scheme="slate"] {
  --nav-section-color: var(--nav-section-dark);
  --md-accent-fg-color: var(--accent-text-dark);

  /* Override Material theme defaults with Dark Magic colors */
  --md-default-bg-color: var(--void-black);
  --md-default-fg-color: var(--bone-ash);
  --md-primary-fg-color: var(--arcane-purple);
  --md-accent-fg-color: var(--toxic-green);

  /* Header bar - Dark Magic gradient */
  --md-primary-fg-color: var(--crimson);
  --md-primary-fg-color--light: #F87171;
  --md-primary-fg-color--dark: var(--blood-red);
  --md-primary-bg-color: var(--deep-violet);
  --md-primary-bg-color--light: var(--arcane-purple);

  /* Code blocks */
  --md-code-bg-color: var(--obsidian);
  --md-code-fg-color: var(--bone-ash);

  /* Links and interactions */
  --md-typeset-a-color: var(--crimson);
  --md-typeset-a-color--hover: var(--toxic-green);
}

/* ============================================
   PREMIUM CARD STYLING
   ============================================ */

/* Enhanced card appearance */
.md-typeset .grid.cards > div {
  background: var(--md-code-bg-color);
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 0.4rem;
  padding: 1.5rem;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Premium hover effect with elevation */
.md-typeset .grid.cards > div:hover {
  border-color: var(--md-accent-fg-color);
  box-shadow: 0 4px 16px rgba(0,0,0,0.12),
              0 2px 8px rgba(0,0,0,0.08);
  transform: translateY(-3px);
}

/* Active card state */
.md-typeset .grid.cards > div:active {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* Card title styling */
.md-typeset .grid.cards > div > strong {
  font-size: 1.1em;
  color: var(--md-accent-fg-color);
  display: block;
  margin-bottom: 0.5rem;
}

/* ============================================
   ENHANCED BUTTON STYLING
   ============================================ */

/* Premium button appearance */
.md-button {
  border-radius: 0.35rem;
  padding: 0.7rem 1.5rem;
  font-weight: 500;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  text-transform: none;
}

/* Primary button premium styling */
.md-button--primary {
  background: linear-gradient(135deg,
    var(--md-primary-fg-color) 0%,
    var(--md-accent-fg-color) 100%);
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

/* Button hover with elevation */
.md-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.md-button--primary:hover {
  box-shadow: 0 6px 16px rgba(0,0,0,0.25);
}

/* Button active state */
.md-button:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}

/* ============================================
   ICON ENHANCEMENTS
   ============================================ */

/* Branded icon colors */
.icon-github { color: #181717; }
.icon-gitlab { color: #FC6D26; }
.icon-docker { color: #2496ED; }
.icon-kubernetes { color: #326CE5; }
.icon-python { color: #3776AB; }
.icon-javascript { color: #F7DF1E; }
.icon-typescript { color: #3178C6; }
.icon-go { color: #00ADD8; }
.icon-rust { color: #CE422B; }
.icon-aws { color: #FF9900; }
.icon-azure { color: #0078D4; }
.icon-gcp { color: #4285F4; }

/* API and documentation icons */
.icon-api { color: #00BCD4; }
.icon-docs { color: #4CAF50; }
.icon-spec { color: #9C27B0; }

/* Lab and learning icons */
.icon-lab { color: #FF9800; }
.icon-playground { color: #FF6F00; }
.icon-exercise { color: #E91E63; }
.icon-learning { color: #2196F3; }

/* Icon sizing utilities */
.icon-large {
  font-size: 1.75rem;
  vertical-align: middle;
}

.icon-xl {
  font-size: 2.5rem;
  vertical-align: middle;
}

/* Inline icon alignment */
.md-typeset a svg.twemoji,
.md-typeset a svg {
  vertical-align: -0.125em;
}

/* ============================================
   ADMONITION ENHANCEMENTS
   ============================================ */

/* Premium admonition styling */
.md-typeset .admonition {
  border-radius: 0.4rem;
  border-left-width: 0.3rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

/* Custom resource admonition */
.md-typeset .admonition.resource {
  border-left-color: #00BCD4;
}

.md-typeset .admonition.resource > .admonition-title {
  background-color: rgba(0, 188, 212, 0.1);
}

.md-typeset .admonition.resource > .admonition-title::before {
  background-color: #00BCD4;
}

/* Custom specification admonition */
.md-typeset .admonition.spec {
  border-left-color: #9C27B0;
}

.md-typeset .admonition.spec > .admonition-title {
  background-color: rgba(156, 39, 176, 0.1);
}

/* Light mode admonition colors - Sorcerer's Grimoire */
[data-md-color-scheme="default"] .md-typeset .admonition {
  box-shadow: 0 2px 8px rgba(62, 39, 35, 0.08);
}

[data-md-color-scheme="default"] .md-typeset .admonition.tip {
  border-left-color: var(--golden-stardust);
}

[data-md-color-scheme="default"] .md-typeset .admonition.warning {
  border-left-color: var(--spell-warning);
}

[data-md-color-scheme="default"] .md-typeset .admonition.danger {
  border-left-color: var(--spell-danger);
}

[data-md-color-scheme="default"] .md-typeset .admonition.info,
[data-md-color-scheme="default"] .md-typeset .admonition.note {
  border-left-color: var(--spell-info);
}

[data-md-color-scheme="default"] .md-typeset .admonition.success {
  border-left-color: var(--spell-success);
}

/* ============================================
   TABLE ENHANCEMENTS
   ============================================ */

/* Premium table styling */
.md-typeset table:not([class]) {
  border-radius: 0.4rem;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}

/* Striped rows for readability */
.md-typeset table tbody tr:nth-child(odd) {
  background-color: var(--md-code-bg-color);
}

/* Interactive row hover */
.md-typeset table tbody tr {
  transition: background-color 0.2s ease;
}

.md-typeset table tbody tr:hover {
  background-color: rgba(var(--md-accent-fg-color--transparent), 0.1);
  cursor: pointer;
}

/* Header styling */
.md-typeset table thead th {
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.85em;
  letter-spacing: 0.05em;
}

/* Compact table variant */
.md-typeset .compact-table td,
.md-typeset .compact-table th {
  padding: 0.5rem 0.75rem;
  font-size: 0.9em;
}

/* ============================================
   CONTENT TAB ENHANCEMENTS
   ============================================ */

/* Premium tab styling */
.md-typeset .tabbed-labels > label {
  border-radius: 0.4rem 0.4rem 0 0;
  transition: all 0.2s ease;
}

.md-typeset .tabbed-labels > label:hover {
  background-color: var(--md-accent-fg-color--transparent);
}

/* Active tab with bottom border */
.md-typeset .tabbed-labels > label[for]:hover {
  color: var(--md-accent-fg-color);
}

/* ============================================
   GRID LAYOUT UTILITIES
   ============================================ */

/* Responsive two-column grid */
.two-column {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}

/* Responsive three-column grid */
.three-column {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

/* Auto-fit responsive grid */
.responsive-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}

/* Mobile responsiveness */
@media screen and (max-width: 768px) {
  .two-column,
  .three-column {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .md-typeset .grid.cards > div {
    padding: 1rem;
  }
}

/* ============================================
   DEFINITION LIST ENHANCEMENTS
   ============================================ */

/* Premium definition list styling for API references */
.md-typeset dd {
  margin-left: 2rem;
  margin-bottom: 1.5rem;
  padding: 1rem;
  background-color: var(--md-code-bg-color);
  border-left: 3px solid var(--md-accent-fg-color);
  border-radius: 0 0.4rem 0.4rem 0;
}

.md-typeset dt code {
  background-color: transparent;
  font-size: 1.1em;
  color: var(--md-accent-fg-color);
}

/* ============================================
   CODE BLOCK ENHANCEMENTS
   ============================================ */

/* Premium code block styling */
.md-typeset pre > code {
  border-radius: 0.4rem;
}

.md-typeset pre {
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

/* Inline code enhancement */
.md-typeset code {
  border-radius: 0.25rem;
  padding: 0.15em 0.4em;
}

/* ============================================
   SECTION DIVIDERS
   ============================================ */

/* Premium horizontal rules */
.md-typeset hr {
  border: 0;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--md-default-fg-color--lightest) 20%,
    var(--md-default-fg-color--lightest) 80%,
    transparent 100%);
  margin: 2rem 0;
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

/* Text alignment utilities */
.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

/* Spacing utilities */
.mt-1 { margin-top: 1rem; }
.mt-2 { margin-top: 2rem; }
.mb-1 { margin-bottom: 1rem; }
.mb-2 { margin-bottom: 2rem; }

/* Display utilities */
.flex {
  display: flex;
  gap: 1rem;
}

.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}

/* ============================================
   LIGHT MODE OPTIMIZATIONS
   ============================================ */

/* Cards on parchment background */
[data-md-color-scheme="default"] .md-typeset .grid.cards > div {
  background-color: var(--parchment-light);
  border-color: var(--parchment-border);
  box-shadow: 0 2px 8px rgba(62, 39, 35, 0.08);
}

[data-md-color-scheme="default"] .md-typeset .grid.cards > div:hover {
  background-color: #FFFFFF;
  border-color: var(--sorcerer-blue);
  box-shadow: 0 4px 16px rgba(21, 101, 192, 0.15);
}

/* Code blocks - lighter parchment */
[data-md-color-scheme="default"] .md-typeset pre {
  box-shadow: 0 2px 8px rgba(62, 39, 35, 0.08);
}

/* Tables on parchment */
[data-md-color-scheme="default"] .md-typeset table:not([class]) {
  box-shadow: 0 1px 4px rgba(62, 39, 35, 0.08);
}

/* ============================================
   DARK MODE OPTIMIZATIONS
   ============================================ */

/* Enhance contrast in dark mode */
[data-md-color-scheme="slate"] .md-typeset .grid.cards > div {
  background-color: rgba(255, 255, 255, 0.02);
  border-color: rgba(255, 255, 255, 0.1);
}

[data-md-color-scheme="slate"] .md-typeset .grid.cards > div:hover {
  background-color: rgba(255, 255, 255, 0.04);
  border-color: var(--md-accent-fg-color);
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
  .md-button,
  .md-typeset .grid.cards > div:hover {
    box-shadow: none;
    transform: none;
  }

  .md-typeset .grid.cards > div {
    break-inside: avoid;
  }
}

/* ============================================
   ACCESSIBILITY ENHANCEMENTS
   ============================================ */

/* Focus states for keyboard navigation */
.md-button:focus,
.md-typeset .grid.cards > div:focus-within {
  outline: 2px solid var(--md-accent-fg-color);
  outline-offset: 2px;
}

/* ============================================
   NAVIGATION SECTION HEADERS CUSTOMIZATION
   ============================================ */

/* Section header labels (Linux, Cloud, DevOps, etc.) */
.md-nav__item--section > .md-nav__link {
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--nav-section-color);  /* Theme-aware color (was #A3D1FF) */
  padding-top: 1rem;
  padding-bottom: 0.5rem;
}

/* Section header hover effect */
.md-nav__item--section > .md-nav__link:hover {
  opacity: 0.8;  /* Universal hover effect for both themes */
}

/* Optional: Add icon spacing for section headers */
.md-nav__item--section > .md-nav__link .md-ellipsis {
  font-family: var(--md-text-font);
}

/* ============================================
   SORCERER'S GRIMOIRE - HEADER BAR (LIGHT MODE)
   ============================================ */

/* Header bar - Subtle parchment gradient */
[data-md-color-scheme="default"] .md-header {
  background: linear-gradient(135deg, var(--parchment-light) 0%, var(--parchment-border) 100%);
  box-shadow: 0 2px 8px rgba(62, 39, 35, 0.1);
  border-bottom: 1px solid var(--parchment-border);
}

/* Header title - Deep ink */
[data-md-color-scheme="default"] .md-header__title {
  color: var(--ink-primary);
}

/* Header links and buttons */
[data-md-color-scheme="default"] .md-header__button {
  color: var(--sorcerer-blue);
}

[data-md-color-scheme="default"] .md-header__button:hover {
  color: var(--enchanted-purple);
}

/* Search box - Light parchment with blue border */
[data-md-color-scheme="default"] .md-search__input {
  background-color: var(--parchment-light);
  border: 1px solid var(--parchment-border);
}

[data-md-color-scheme="default"] .md-search__input:focus {
  border-color: var(--sorcerer-blue);
  box-shadow: 0 0 10px rgba(21, 101, 192, 0.2);
}

/* Primary buttons - Mystical gradient */
[data-md-color-scheme="default"] .md-button--primary {
  background: linear-gradient(135deg, var(--sorcerer-blue) 0%, var(--enchanted-purple) 100%);
  color: #FFFFFF;
}

[data-md-color-scheme="default"] .md-button--primary:hover {
  box-shadow: 0 4px 16px rgba(21, 101, 192, 0.3);
  transform: translateY(-2px);
}

/* ============================================
   DARK MAGIC THEME - HEADER BAR (DARK MODE)
   ============================================ */

/* Header bar background - Blood magic to arcane gradient */
[data-md-color-scheme="slate"] .md-header {
  background: linear-gradient(135deg, var(--blood-red) 0%, var(--deep-violet) 100%);
  box-shadow: 0 0 20px rgba(185, 28, 28, 0.4);
}

/* Header title color - Bone ash */
[data-md-color-scheme="slate"] .md-header__title {
  color: var(--bone-ash);
}

/* Header links and buttons - Light purple */
[data-md-color-scheme="slate"] .md-header__button {
  color: var(--nav-section-dark);
}

[data-md-color-scheme="slate"] .md-header__button:hover {
  color: var(--toxic-green);
}

/* Search box in header - Obsidian with crimson border */
[data-md-color-scheme="slate"] .md-search__input {
  background-color: rgba(28, 28, 28, 0.5);
  border: 1px solid rgba(185, 28, 28, 0.3);
}

[data-md-color-scheme="slate"] .md-search__input:focus {
  border-color: var(--crimson);
  box-shadow: 0 0 10px rgba(229, 62, 62, 0.5);
}

/* ============================================
   ACCESSIBILITY
   ============================================ */

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .md-typeset .grid.cards > div,
  .md-button {
    transition: none;
  }
}