/* style.css - Combined Accessible Showcase Styles - NESTED VERSION */

/*==============================
 0. CSS Layers Setup
==============================*/
@layer reset, base, layout, components, utilities;

/*==============================
 1. Reset Layer
==============================*/
@layer reset {
 /* Basic Reset */
 *,
 *::before,
 *::after {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
 }

 html {
   -webkit-text-size-adjust: 100%;
   scroll-behavior: smooth;
 }

 body {
   min-height: 100vh;
   line-height: 1.5;
 }

 img,
 picture,
 video,
 canvas,
 svg {
   display: block;
   max-width: 100%;
   height: auto;
 }

 input,
 button,
 textarea,
 select {
   font: inherit;
 }

 h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
   overflow-wrap: break-word;
   line-height: 1.2;
 }

 ul,
 ol {
   list-style-position: inside;
 }

 /* Reduced Motion Reset */
 @media (prefers-reduced-motion: reduce) {
   html:focus-within {
     scroll-behavior: auto;
   }
   *,
   *::before,
   *::after {
     animation-duration: 0.01ms !important;
     animation-iteration-count: 1 !important;
     transition-duration: 0.01ms !important;
     scroll-behavior: auto !important;
   }
 }
}

/*==============================
 2. Base Layer (Variables, Body, Typography, Focus)
==============================*/
@layer base {
 :root {
   /* === Light Mode Palette === */
   --color-text-light: #18181b; /* Near black */
   --color-bg-light: #f8fafc; /* Cooler Near white */
   --color-surface-light: #ffffff; /* Pure white for surfaces */
   --color-primary-light: #2563eb; /* Blue */
   --color-secondary-light: #4f46e5; /* Indigo */
   --color-accent-light: #db2777; /* Pink */
   --color-muted-light: #64748b; /* Cooler Gray */
   --color-border-light: #e2e8f0; /* Lighter Cooler Gray */
   --color-focus-ring-light: var(--color-primary-light);
   --color-success-light: #16a34a; /* Green */
   --color-error-light: #dc2626; /* Red */
   --color-success-bg-light: #f0fdf4; /* Light Green BG */
   --color-error-bg-light: #fef2f2; /* Light Red BG */
   --shadow-color-light: 220 3% 15%; /* For box-shadows */

   /* === Dark Mode Palette === */
   --color-text-dark: #e2e8f0; /* Lighter Cooler Gray */
   --color-bg-dark: #0f172a; /* Very Dark Blue */
   --color-surface-dark: #1e293b; /* Dark Slate Blue */
   --color-primary-dark: #60a5fa; /* Lighter Blue */
   --color-secondary-dark: #818cf8; /* Lighter Indigo */
   --color-accent-dark: #f472b6; /* Lighter Pink */
   --color-muted-dark: #94a3b8; /* Cooler Gray */
   --color-border-dark: #334155; /* Darker Slate Blue */
   --color-focus-ring-dark: var(--color-primary-dark);
   --color-success-dark: #4ade80; /* Lighter Green */
   --color-error-dark: #f87171; /* Lighter Red */
   --color-success-bg-dark: #166534; /* Darker Green BG */
   --color-error-bg-dark: #991b1b; /* Darker Red BG */
   --shadow-color-dark: 220 40% 2%; /* For box-shadows */

   /* === Base Theme Variables === */
   --text-color: var(--color-text-light);
   --bg-color: var(--color-bg-light);
   --surface-color: var(--color-surface-light);
   --primary-color: var(--color-primary-light);
   --secondary-color: var(--color-secondary-light);
   --accent-color: var(--color-accent-light);
   --muted-color: var(--color-muted-light);
   --border-color: var(--color-border-light);
   --focus-ring-color: var(--color-focus-ring-light);
   --success-color: var(--color-success-light);
   --error-color: var(--color-error-light);
   --success-bg: var(--color-success-bg-light);
   --error-bg: var(--color-error-bg-light);
   --shadow-color: var(--shadow-color-light);

   /* Fonts */
   --font-primary: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
   --font-heading: var(--font-primary);
   --font-mono: 'JetBrains Mono', 'Courier New', Courier, monospace;

   /* Weights */
   --fw-normal: 400;
   --fw-medium: 500; /* Added medium weight */
   --fw-bold: 700;

   /* Spacing (Fluid) */
   --space-xs: clamp(0.25rem, 0.5vi + 0.1rem, 0.5rem);
   --space-sm: clamp(0.5rem, 1vi + 0.2rem, 0.8rem); /* Slightly smaller sm */
   --space-md: clamp(1rem, 2vi + 0.5rem, 1.25rem); /* Slightly smaller md */
   --space-lg: clamp(1.5rem, 3vi + 1rem, 2.5rem); /* Slightly smaller lg */
   --space-xl: clamp(2rem, 4vi + 1.5rem, 4rem);

   /* Transitions */
   --transition-speed: 0.2s;
   --transition-ease: cubic-bezier(0.4, 0, 0.2, 1); /* Smoother ease */

   /* Borders */
   --border-radius-sm: 0.25rem;
   --border-radius-md: 0.375rem; /* Standard md */
   --border-radius-lg: 0.5rem; /* Standard lg */
   --border-width: 1px;
   --border-width-thick: 2px;

   /* Shadows */
   --shadow-sm: 0 1px 2px 0 hsl(var(--shadow-color) / 0.05);
   --shadow-md: 0 4px 6px -1px hsl(var(--shadow-color) / 0.1), 0 2px 4px -2px hsl(var(--shadow-color) / 0.1);
   --shadow-lg: 0 10px 15px -3px hsl(var(--shadow-color) / 0.1), 0 4px 6px -4px hsl(var(--shadow-color) / 0.1);
 }

 /* Apply Dark Mode variables when .dark-mode class is present */
 body.dark-mode {
   --text-color: var(--color-text-dark);
   --bg-color: var(--color-bg-dark);
   --surface-color: var(--color-surface-dark);
   --primary-color: var(--color-primary-dark);
   --secondary-color: var(--color-secondary-dark);
   --accent-color: var(--color-accent-dark);
   --muted-color: var(--color-muted-dark);
   --border-color: var(--color-border-dark);
   --focus-ring-color: var(--color-focus-ring-dark);
   --success-color: var(--color-success-dark);
   --error-color: var(--color-error-dark);
   --success-bg: var(--color-success-bg-dark);
   --error-bg: var(--color-error-bg-dark);
   --shadow-color: var(--shadow-color-dark);
 }

 /* Body Styling */
 body {
   font-family: var(--font-primary);
   color: var(--text-color);
   background-color: var(--bg-color);
   font-size: 100%;
   transition: background-color var(--transition-speed) var(--transition-ease), color var(--transition-speed) var(--transition-ease);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }

 /* Base Typography */
 p {
   line-height: 1.7;
   max-width: 65ch;
   margin-bottom: var(--space-md); /* Tighter max-width */
 }

 h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
   font-family: var(--font-heading);
   font-weight: var(--fw-bold);
   color: var(--primary-color);
   margin-bottom: var(--space-sm);
 }
 h1 { font-size: clamp(2rem, 5vi + 1rem, 3.5rem); }
 h2 { font-size: clamp(1.5rem, 4vi + 0.8rem, 2.5rem); color: var(--secondary-color); } /* Slide titles use secondary */
 h3 { font-size: clamp(1.2rem, 3vi + 0.6rem, 1.75rem); }
 h4 { font-size: clamp(1.1rem, 2vi + 0.5rem, 1.25rem); font-weight: var(--fw-medium); }

 a {
   color: var(--secondary-color);
   text-decoration: underline;
   text-decoration-thickness: var(--border-width);
   text-underline-offset: 3px;
   transition: color var(--transition-speed) var(--transition-ease), text-decoration-color var(--transition-speed) var(--transition-ease);

   &:hover {
     text-decoration-thickness: var(--border-width-thick);
     color: var(--accent-color);
   }
 }

 strong,
 b {
   font-weight: var(--fw-bold);
   color: var(--accent-color);
 }

 code {
   font-family: var(--font-mono);
   background-color: color-mix(in srgb, var(--surface-color) 80%, var(--text-color) 8%);
   padding: 0.15em 0.4em;
   border-radius: var(--border-radius-sm);
   font-size: 0.9em;
   border: var(--border-width) solid var(--border-color);
   color: var(--accent-color); /* Make code stand out more */
 }

 /* Accessibility Focus Styles - Enhanced */
 :focus-visible {
   outline: var(--border-width-thick) solid var(--focus-ring-color);
   outline-offset: 2px;
   border-radius: var(--border-radius-md); /* Match common border radius */
   box-shadow: 0 0 0 var(--border-width-thick) var(--bg-color), 0 0 0 calc(var(--border-width-thick) * 2) var(--focus-ring-color); /* More robust ring */
 }
 :focus:not(:focus-visible) {
   outline: none;
   box-shadow: none;
 }
}

/*==============================
 3. Layout Layer (Container, Slides, Header)
==============================*/
@layer layout {
 /* Fixed Header */
 .site-header {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   background-color: var(--surface-color); /* Use surface color */
   border-bottom: var(--border-width) solid var(--border-color);
   z-index: 100;
   padding-block: 0; /* Remove padding, use height */
   height: 60px; /* Fixed height */
   box-shadow: var(--shadow-md);
   transition: background-color var(--transition-speed) var(--transition-ease);

   .header-content {
     max-width: 1200px;
     height: 100%; /* Fill header height */
     margin-inline: auto;
     padding-inline: var(--space-lg);
     display: flex;
     justify-content: space-between;
     align-items: center;
     gap: var(--space-md);
   }

   .logo {
     font-weight: var(--fw-bold);
     font-size: 1.4rem;
     color: var(--primary-color);
   }

   nav {
     height: 100%; /* Allow nav items to align center */

     ul {
       list-style: none;
       padding: 0;
       margin: 0;
       display: flex;
       gap: var(--space-xs); /* Smaller gap between links */
       height: 100%; /* Allow items to align center */

       li {
         display: flex; /* Allow anchor to fill height */
         align-items: center;

         a {
           display: flex;
           align-items: center;
           height: 100%; /* Fill li height */
           padding: 0 var(--space-md); /* Horizontal padding only */
           text-decoration: none;
           font-weight: var(--fw-medium); /* Medium weight */
           color: var(--muted-color); /* Muted color */
           border-radius: 0; /* No radius needed */
           border-bottom: var(--border-width-thick) solid transparent; /* Transparent border for hover effect */
           transition: color var(--transition-speed) var(--transition-ease), border-color var(--transition-speed) var(--transition-ease);

           &:hover {
             color: var(--primary-color);
             border-bottom-color: var(--primary-color); /* Underline on hover */
             text-decoration: none; /* Remove default underline */
             background-color: transparent; /* No background on hover */
           }
           &:focus-visible {
             color: var(--primary-color);
             border-bottom-color: var(--focus-ring-color);
             outline: none; /* Use border instead of outline */
             box-shadow: none;
             background-color: color-mix(in srgb, var(--focus-ring-color) 10%, transparent); /* Slight bg on focus */
           }
         }
       }
     }
   }

   #theme-toggle {
     background: none;
     border: none;
     color: var(--muted-color);
     font-size: 1.3rem;
     cursor: pointer;
     padding: var(--space-xs);
     border-radius: var(--border-radius-md);
     line-height: 1;
     transition: color var(--transition-speed) var(--transition-ease), background-color var(--transition-speed) var(--transition-ease);

     &:hover {
       color: var(--primary-color);
       background-color: color-mix(in srgb, var(--primary-color) 10%, transparent);
     }
     &:focus-visible {
       outline-offset: 1px;
       box-shadow: 0 0 0 var(--border-width-thick) var(--bg-color), 0 0 0 calc(var(--border-width-thick) * 2) var(--focus-ring-color);
     }
   }
 }

 /* Presentation Container & Slides */
 .presentation-container {
   /* No scroll snap for this merged version, allow natural scroll */
   /* height: 100vh; */
   /* overflow-y: scroll; */
   /* scroll-snap-type: y mandatory; */
   padding-top: 60px; /* Account for fixed header */
 }

 .slide {
   min-height: calc(100vh - 60px); /* Fill remaining viewport */
   width: 100%;
   /* scroll-snap-align: start; */ /* Removed */
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   padding: var(--space-xl) var(--space-lg); /* More padding */
   position: relative;
   border-bottom: var(--border-width) solid var(--border-color);
   container-type: inline-size;
   container-name: slide-container;

   &:last-of-type {
     border-bottom: none;
   }

   .slide-content {
     max-width: 900px; /* Consistent max width */
     width: 100%;
     /* Fade in animation */
     opacity: 0;
     transform: translateY(20px);
     animation: fadeInSlide 0.5s forwards ease-out;
     animation-delay: 0.1s; /* Faster delay */
   }
 }

 @keyframes fadeInSlide {
   to {
     opacity: 1;
     transform: translateY(0);
   }
 }

 /* Column Layout Helper */
 .columns {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); /* Larger min size */
   gap: var(--space-lg);
   margin-block: var(--space-md);
 }

 @container slide-container (max-width: 700px) {
   .columns {
     grid-template-columns: 1fr;
   }
 }
}

/*==============================
 4. Components Layer (Specific Elements)
==============================*/
@layer components {

 /* Skip Link Styling */
 .skip-link {
   position: absolute;
   top: -10em;
   left: 1rem;
   background-color: var(--primary-color);
   color: var(--surface-color); /* Use surface color for text on primary */
   padding: var(--space-sm) var(--space-md);
   border-radius: var(--border-radius-md);
   z-index: 110; /* Above header */
   transition: top var(--transition-speed) var(--transition-ease);
   font-weight: var(--fw-bold);
   box-shadow: var(--shadow-lg);

   &:focus {
     top: calc(60px + 1rem); /* Position below fixed header */
     outline: none;
     box-shadow: 0 0 0 var(--border-width-thick) var(--bg-color), 0 0 0 calc(var(--border-width-thick) * 2) var(--focus-ring-color);
   }
 }



 /* Title Slide Specifics */
 .title-slide {
   text-align: center;
   background: linear-gradient(145deg, var(--surface-color), color-mix(in srgb, var(--bg-color) 90%, var(--primary-color) 10%));

   h1 {
     color: var(--text-color);
     margin-bottom: var(--space-sm);
   }
   .subtitle {
     font-size: clamp(1.3rem, 2.5vi + 0.8rem, 2.2rem);
     color: var(--accent-color);
     margin-bottom: var(--space-lg);
     font-weight: var(--fw-normal);
   }
 }

 /* General Slide Content */
 .slide {
   /* Add component-level styles to .slide */
   h2 {
     margin-bottom: var(--space-lg); /* More space below H2 */
   }
   ul,
   ol {
     margin-block: var(--space-md);
     padding-inline-start: var(--space-lg);

     li {
       margin-bottom: var(--space-sm);
     }
   }

   aside.explanation {
     margin-block-start: var(--space-xl); /* More space before explanation */
     padding: var(--space-lg);
     background-color: var(--surface-color); /* Use surface color */
     border: var(--border-width) solid var(--border-color);
     border-left: 4px solid var(--secondary-color);
     border-radius: var(--border-radius-lg);
     font-size: 0.9rem;
     color: var(--muted-color);
     box-shadow: var(--shadow-sm);
     max-width: 125ch;

     & strong {
       color: var(--secondary-color);
       display: flex; /* Align icon and text */
       align-items: center;
       gap: var(--space-sm);
       margin-bottom: var(--space-md);
       font-size: 1.1em; /* Slightly larger heading */
     }
     & ul {
       padding-inline-start: var(--space-md);
       margin-block: var(--space-sm) 0;
       list-style-type: none; /* Use standard disc */
     }
     & li {
       margin-bottom: var(--space-xs);
       color: var(--text-color); /* Make list text standard color */

       &::marker {
         color: var(--secondary-color);
       }
     }
     & i.fa-circle-info { /* Icon style */
       color: var(--secondary-color);
       font-size: 1.3em;
     }
   }
 }

 /* Accessible Form */
 .accessible-form {
   display: grid;
   gap: var(--space-lg);
   margin-block: var(--space-md);
   padding: var(--space-lg);
   background-color: var(--surface-color);
   border-radius: var(--border-radius-lg);
   border: 1px solid var(--border-color);
   box-shadow: var(--shadow-md);

   .form-group {
     display: grid;
     gap: var(--space-xs);

     label {
       font-weight: var(--fw-medium); /* Medium weight */
       color: var(--text-color);

       span[aria-hidden="true"] { /* Required asterisk */
         color: var(--error-color);
         font-weight: var(--fw-bold);
         margin-inline-start: 2px;
       }
     }

     input[type="text"],
     input[type="email"],
     textarea {
       width: 100%;
       padding: var(--space-sm) var(--space-md);
       border: var(--border-width-thick) solid var(--border-color);
       border-radius: var(--border-radius-md);
       background-color: var(--bg-color);
       color: var(--text-color);
       transition: border-color var(--transition-speed) var(--transition-ease), background-color var(--transition-speed) var(--transition-ease);
       font-size: 1rem;

       &:focus-visible {
         border-color: var(--focus-ring-color); /* Change border on focus */
         box-shadow: none; /* Use border instead of default focus ring */
         outline: none;
       }

       /* Validation states nested inside */
       &:user-invalid {
         border-color: var(--error-color);
         background-color: var(--error-bg);

         & ~ .validation-message.error {
           display: flex; /* Show error message */
           color: var(--error-color);
         }
       }

       &:user-valid {
         border-color: var(--success-color);
         background-color: var(--success-bg);

         & ~ .validation-message.success {
           display: flex; /* Show success message */
           color: var(--success-color);
         }
       }
     }

     textarea {
       min-height: 100px;
       resize: vertical;
     }

     input[type="checkbox"] {
       accent-color: var(--primary-color);
       width: 1.3em; /* Slightly larger */
       height: 1.3em;
       margin-inline-end: var(--space-sm);

       /* Checkbox validation styling nested */
       &:required {
         &:user-invalid {
           outline: var(--border-width-thick) solid var(--error-color);
           outline-offset: 2px;

           & + label {
             color: var(--error-color); /* Style label text */
           }
           & ~ .validation-message.error {
             display: flex; color: var(--error-color);
           }
         }

         &:user-valid {
           outline: var(--border-width-thick) solid var(--success-color);
           outline-offset: 2px;

           & + label {
             color: var(--success-color);
           }
           & ~ .validation-message.success {
             display: flex; color: var(--success-color);
           }
         }
       }
     }

     .checkbox-group {
       display: flex;
       flex-wrap: wrap;
       align-items: center;
       gap: var(--space-xs) var(--space-sm);
       background-color: color-mix(in srgb, var(--surface-color) 50%, var(--bg-color) 50%); /* Slight bg */
       padding: var(--space-md);
       border-radius: var(--border-radius-md);
       border: 1px solid var(--border-color);

       label {
         margin-bottom: 0;
         flex: 1; /* Take available space */
         cursor: pointer; /* Pointer cursor for label */
       }

       .validation-message {
         width: 100%; /* Full width below */
         order: 3;
         margin-top: var(--space-xs);
       }
     }

     /* Validation Messages */
     .validation-message {
       font-size: 0.875rem; /* Slightly larger */
       font-weight: var(--fw-medium);
       display: none; /* Hide by default */
       gap: var(--space-xs);
       align-items: center;
       margin-top: var(--space-xs); /* Space above message */

       i {
         font-size: 1.1em; /* Slightly larger icon */
         flex-shrink: 0; /* Prevent icon shrinking */
       }
     }
   }

   /* Submit Button */
   button[type="submit"] {
     padding: var(--space-sm) var(--space-lg);
     background-color: var(--primary-color);
     color: var(--surface-color); /* Ensure contrast */
     border: none;
     border-radius: var(--border-radius-md);
     font-weight: var(--fw-bold);
     cursor: pointer;
     transition: background-color var(--transition-speed) var(--transition-ease), transform 0.1s ease-out;
     justify-self: start;
     box-shadow: var(--shadow-sm);

     &:hover {
       background-color: color-mix(in srgb, var(--primary-color) 85%, black 15%);
       box-shadow: var(--shadow-md);
       transform: translateY(-1px);
     }
     &:active {
       transform: translateY(0px);
       box-shadow: var(--shadow-sm);
     }
     &:focus-visible {
       outline-offset: 3px;
       /* Focus ring already handled globally */
     }
   }
 }

 /* Landmark Demo Styling */
 .landmark-demo {
   border: var(--border-width) dashed var(--border-color);
   padding: var(--space-md);
   display: grid;
   gap: var(--space-sm);
   margin-block: var(--space-md);
   background-color: var(--surface-color);
   border-radius: var(--border-radius-lg);

   .demo-block {
     padding: var(--space-md);
     border: var(--border-width-thick) solid var(--border-color); /* Thicker border */
     border-radius: var(--border-radius-md);
     font-weight: var(--fw-medium);

     code {
       background: none;
       border: none;
       padding: 0;
       font-weight: var(--fw-bold);
       color: var(--text-color);
     }
     h3 {
       font-size: 1.1em;
       margin-bottom: var(--space-xs);
       color: var(--text-color);
     }
     p {
       font-size: 0.9em;
       margin-bottom: 0;
       color: var(--muted-color);
     }
   }

   /* These target direct children with these classes */
   .demo-header { border-color: var(--primary-color); background-color: color-mix(in srgb, var(--primary-color) 5%, var(--surface-color) 95%); }
   .demo-nav { border-color: var(--secondary-color); background-color: color-mix(in srgb, var(--secondary-color) 5%, var(--surface-color) 95%); }
   .demo-main { border-color: var(--accent-color); background-color: color-mix(in srgb, var(--accent-color) 5%, var(--surface-color) 95%); padding-bottom: var(--space-lg); position: relative; }
   .demo-article, .demo-section { border-color: var(--success-color); background-color: color-mix(in srgb, var(--success-color) 5%, var(--surface-color) 95%); margin: var(--space-md); }
   .demo-aside { border-color: var(--muted-color); background-color: color-mix(in srgb, var(--muted-color) 5%, var(--surface-color) 95%); }
   .demo-footer { border-color: var(--primary-color); background-color: color-mix(in srgb, var(--primary-color) 5%, var(--surface-color) 95%); }
 }

 /* Image/Graphics Demo Styling */
 .demo-image {
   border: var(--border-width) solid var(--border-color);
   border-radius: var(--border-radius-lg); /* Larger radius */
   margin-block-end: var(--space-sm);
   height: 150px; /* Fixed height for demo graphics */
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--text-color);
   font-style: italic;
   font-size: 0.9rem;
   text-align: center;
   padding: var(--space-sm);
 }

 /* CSS Gradient Examples */
 .css-gradient-informative {
   background: linear-gradient(135deg, var(--primary-color), color-mix(in srgb, var(--primary-color) 40%, var(--secondary-color) 60%));
   color: var(--surface-color); /* Text on gradient */
 }
 .css-gradient-decorative {
   background: radial-gradient(circle, var(--accent-color) 0%, color-mix(in srgb, var(--accent-color) 20%, transparent) 70%);
   border-style: dashed;
   height: 80px;
 }
 .css-gradient-figure {
   background: repeating-linear-gradient(
      45deg,
      var(--surface-color),
      var(--surface-color) 10px,
      color-mix(in srgb, var(--secondary-color) 10%, var(--surface-color) 90%) 10px,
      color-mix(in srgb, var(--secondary-color) 10%, var(--surface-color) 90%) 20px
   );
   color: var(--secondary-color);
 }

 .demo-figure {
   border: var(--border-width) dashed var(--border-color);
   padding: var(--space-md);
   display: inline-block;
   border-radius: var(--border-radius-lg);
   margin: 0;
   background-color: var(--surface-color);

   .demo-image {
     margin-bottom: 0; /* Remove margin inside figure */
   }
   figcaption {
     font-size: 0.9rem;
     color: var(--muted-color);
     text-align: center;
     margin-top: var(--space-sm);
   }
 }
 .demo-svg {
   display: inline-block;
   vertical-align: -0.15em; /* Align better with text */
   margin-inline-end: var(--space-xs);
   fill: var(--primary-color);
 }

 /* Contrast Demo Styling */
 .contrast-examples {
   h3 {
     margin-bottom: var(--space-sm);
   }
 }
 .contrast-box {
   padding: var(--space-md);
   border-radius: var(--border-radius-md);
   margin-bottom: var(--space-sm);
   border: var(--border-width) solid var(--border-color);
   text-align: center;
 }
 .large-text { font-size: 1.5rem; font-weight: var(--fw-bold); }

 /* Good Contrast */
 .good-text-normal { background-color: var(--primary-color); color: var(--surface-color); } /* Ratio > 4.5:1 */
 .good-text-large { background-color: var(--secondary-color); color: var(--surface-color); } /* Ratio > 3:1 */
 .good-ui { background-color: var(--success-color); color: var(--surface-color); border-color: var(--success-color); font-weight: var(--fw-bold);} /* Button BG/Text > 3:1 */

 /* Bad Contrast */
 .bad-text-normal {
   background-color: var(--bg-color); color: var(--muted-color); /* FAIL */
   i { color: var(--error-color); margin-left: var(--space-xs); }
 }
 .bad-text-large {
   background-color: var(--primary-color); color: var(--secondary-color); /* FAIL */
   i { color: var(--error-color); margin-left: var(--space-xs); }
 }
 .bad-ui {
   background-color: var(--surface-color); color: var(--muted-color); border-color: var(--muted-color); font-weight: var(--fw-bold);/* FAIL */
   i { color: var(--error-color); margin-left: var(--space-xs); }
 }

 /* Non-Color Cues */
 .link-in-text {
   color: var(--secondary-color);
   text-decoration: none; /* No underline by default */

   &:hover,
   &:focus-visible {
     text-decoration: underline;
     text-decoration-thickness: var(--border-width-thick); /* Underline on hover/focus */
   }
 }

 .status-indicator {
   font-weight: var(--fw-bold);

   i {
     margin-right: var(--space-xs);
   }
   &.error {
     color: var(--error-color);
   }
   &.success {
     color: var(--success-color);
   }
 }

 /* ARIA Live Region */
 .demo-button,
 #trigger-update-btn { /* Style trigger button */
   padding: var(--space-sm) var(--space-md);
   background-color: var(--accent-color);
   color: var(--surface-color);
   border: none;
   border-radius: var(--border-radius-md);
   font-weight: var(--fw-bold);
   cursor: pointer;
   transition: background-color var(--transition-speed) var(--transition-ease);
   box-shadow: var(--shadow-sm);

   &:hover {
     background-color: color-mix(in srgb, var(--accent-color) 85%, black 15%);
     box-shadow: var(--shadow-md);
   }
 }
 .status-message-container { margin-block-start: var(--space-md); }
 .status-box-live {
   margin-block-start: var(--space-xs);
   padding: var(--space-md);
   border: var(--border-width) dashed var(--border-color);
   border-radius: var(--border-radius-md);
   background-color: var(--surface-color);
   min-height: 3em;
   color: var(--muted-color);
   font-style: italic;
 }

 /* Accessible Table */
 .table-wrapper {
   overflow-x: auto;
   -webkit-overflow-scrolling: touch;
   border: var(--border-width) solid var(--border-color);
   border-radius: var(--border-radius-lg); /* Rounded corners for wrapper */
   margin-block: var(--space-md);
   box-shadow: var(--shadow-sm);
 }
 .demo-table {
   width: 100%;
   border-collapse: collapse;
   background-color: var(--surface-color);
   font-size: 0.95rem;
   border-radius: var(--border-radius-lg); /* Ensures inner corners not sharp */
   overflow: hidden; /* Clip corners */

   caption {
     font-size: 1.2em;
     font-weight: var(--fw-bold);
     padding: var(--space-md);
     caption-side: top;
     text-align: left;
     color: var(--text-color);
     background-color: color-mix(in srgb, var(--surface-color) 50%, var(--bg-color) 50%);
     border-bottom: var(--border-width) solid var(--border-color);
   }

   th,
   td {
     padding: var(--space-md); /* Consistent padding */
     text-align: left;
     border-bottom: var(--border-width) solid var(--border-color);
     vertical-align: middle;
   }

   tbody {
     tr {
       &:last-child {
         th,
         td {
           border-bottom: none; /* Remove border on last body row */
         }
       }
       &:hover {
         th[scope="row"],
         td {
           background-color: color-mix(in srgb, var(--primary-color) 8%, transparent);
         }
       }
     }
   }

   tfoot {
     th,
     td {
       border-top: var(--border-width-thick) solid var(--border-color); /* Thicker border above footer */
       border-bottom: none; /* No border below footer */
       font-weight: var(--fw-bold);
       color: var(--text-color);
       background-color: color-mix(in srgb, var(--surface-color) 50%, var(--bg-color) 50%);
     }
   }

   thead {
     th {
       background-color: color-mix(in srgb, var(--surface-color) 50%, var(--bg-color) 50%);
       font-weight: var(--fw-bold);
       color: var(--text-color);
       border-bottom-width: var(--border-width-thick); /* Thicker border below header */
     }
   }

   th[scope="row"] {
     font-weight: var(--fw-medium); /* Medium weight for row headers */
     color: var(--text-color);
     background-color: color-mix(in srgb, var(--surface-color) 20%, var(--bg-color) 80%);
   }

   td {
     .fa-check { color: var(--success-color); }
     .fa-xmark { color: var(--error-color); }
     .fa-circle-half-stroke { color: var(--muted-color); }
     .fa-solid {
       margin-right: var(--space-xs);
       font-size: 1.1em;
     }
     [aria-label] { /* Visually hide aria-label text if icon present */
       /* Reusing utility class logic */
       position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0;
     }
   }
 }

 /* Reduced Motion Demo */
 .motion-demo-container {
   padding: var(--space-lg);
   background-color: var(--surface-color);
   border: 1px solid var(--border-color);
   border-radius: var(--border-radius-lg);
   box-shadow: var(--shadow-md);
 }
 .motion-box-demo {
   width: 80px;
   height: 80px;
   padding: var(--space-sm);
   background-color: var(--accent-color);
   color: var(--surface-color);
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 50%; /* Circle */
   margin: var(--space-md) auto; /* Center */
   font-size: 0.8rem;
   font-weight: var(--fw-bold);
   animation: spin-demo 4s linear infinite;

   &.reduce-motion-forced {
     animation: fade-demo 2s ease-in-out infinite alternate; /* Fade instead */
   }
 }

 @keyframes spin-demo {
   from { transform: rotate(0deg) scale(1); }
   50% { transform: rotate(180deg) scale(1.1); }
   to { transform: rotate(360deg) scale(1); }
 }

 /* Disable/change animation based on media query */
 @media (prefers-reduced-motion: reduce) {
   .motion-box-demo {
     animation: fade-demo 2s ease-in-out infinite alternate; /* Fade instead */
   }
 }

 @keyframes fade-demo {
   from { opacity: 1; transform: scale(1); }
   to { opacity: 0.5; transform: scale(0.95); }
 }

 /* Toggle Switch Style */
 .toggle-switch {
   position: relative;
   display: inline-flex; /* Use flex for alignment */
   align-items: center;
   gap: var(--space-sm);
   cursor: pointer;
   font-weight: var(--fw-medium);

   input {
     opacity: 0;
     width: 0;
     height: 0;

     &:checked + .slider {
       background-color: var(--primary-color);

       &::before {
         transform: translateX(20px); /* Move circle */
       }
     }
     &:focus-visible + .slider {
       outline: var(--border-width-thick) solid var(--focus-ring-color);
       outline-offset: 2px;
     }
   }

   .slider {
     position: relative;
     display: inline-block;
     width: 44px; /* Width */
     height: 24px; /* Height */
     background-color: var(--muted-color);
     border-radius: 24px; /* Make it round */
     transition: background-color var(--transition-speed) var(--transition-ease);

     &::before { /* The circle */
       position: absolute;
       content: "";
       height: 18px;
       width: 18px;
       left: 3px;
       bottom: 3px;
       background-color: var(--surface-color);
       border-radius: 50%;
       transition: transform var(--transition-speed) var(--transition-ease);
     }
   }
 }

 /* Custom Accordion */
 .custom-accordion {
   h3 { margin-bottom: var(--space-md); }

   .accordion-item {
     border: 1px solid var(--border-color);
     border-radius: var(--border-radius-lg);
     margin-bottom: var(--space-sm);
     background-color: var(--surface-color);
     overflow: hidden; /* Ensure panel stays contained */

     h4 { margin: 0; } /* Remove margin from heading wrapping button */

     .accordion-trigger {
       display: flex;
       justify-content: space-between;
       align-items: center;
       width: 100%;
       padding: var(--space-md) var(--space-lg);
       background-color: transparent;
       border: none;
       font-size: 1.1rem;
       font-weight: var(--fw-medium);
       text-align: left;
       cursor: pointer;
       color: var(--text-color);
       transition: background-color var(--transition-speed) var(--transition-ease);

       i {
         color: var(--muted-color);
         transition: transform var(--transition-speed) var(--transition-ease);
         flex-shrink: 0; /* Prevent icon shrinking */
         margin-left: var(--space-md);
       }

       &:hover {
         background-color: color-mix(in srgb, var(--primary-color) 5%, transparent);
       }
       &:focus-visible {
         background-color: color-mix(in srgb, var(--primary-color) 10%, transparent);
         /* Uses global focus ring */
       }
       &[aria-expanded="true"] {
         background-color: color-mix(in srgb, var(--primary-color) 8%, var(--surface-color) 92%);
         border-bottom: 1px solid var(--border-color);
         color: var(--primary-color);

         i {
           transform: rotate(180deg);
           color: var(--primary-color);
         }
       }
     }

     .accordion-panel {
       padding: var(--space-lg);
       background-color: var(--bg-color); /* Slightly different bg for panel */
       font-size: 0.95rem;

       &[hidden] {
         display: none;
       }
       p:last-child {
         margin-bottom: 0;
       }
     }
   }
 }

 /* Focus Management Demo */
 .modal-placeholder {
   border: 2px dashed var(--accent-color);
   padding: var(--space-lg);
   margin-top: var(--space-md);
   background-color: var(--surface-color);
   border-radius: var(--border-radius-lg);

   &[hidden] {
     display: none;
   }
   h3 { color: var(--accent-color); }
   button { /* Basic button style */
     margin-top: var(--space-md);
     padding: var(--space-sm) var(--space-md);
     background-color: var(--muted-color);
     color: var(--surface-color);
     border: none;
     border-radius: var(--border-radius-md);
     cursor: pointer;
   }
 }

}

/*==============================
 5. Utilities Layer
==============================*/
@layer utilities {
 /* Reusable visually hidden class */
 .visually-hidden {
   clip: rect(0 0 0 0);
   clip-path: inset(50%);
   height: 1px;
   overflow: hidden;
   position: absolute;
   white-space: nowrap;
   width: 1px;
 }
}