@import url("https://cdn.jsdelivr.net/npm/open-dyslexic@1.0.3/open-dyslexic-regular.min.css");

/* ── PANDAMIND GLOBALS.CSS ─────────────────────────────────────────
   Semantic CSS variables for the Material Design color system.
   Light and dark mode values are defined here.
   Tailwind picks these up via var() references in the config.
   ─────────────────────────────────────────────────────────────── */

/* ─── LIGHT MODE (default) ─── */
:root,
html.light {
  --color-background:               #f5f3ff;
  --color-surface:                  #ffffff;
  --color-surface-bright:           #ffffff;
  --color-surface-dim:              #f5f3ff;
  --color-surface-variant:          #F5F3FF;
  --color-surface-container-lowest: #ffffff;
  --color-surface-container-low:    #FAFAFB;
  --color-surface-container:        #F5F3FF;
  --color-surface-container-high:   #EDEBFF;
  --color-surface-container-highest:#E9E6FF;
  --color-inverse-surface:          #1F1B3A;
  --color-inverse-on-surface:       #F5F3FF;

  /* Purple primary */
  --color-primary:                  #7C5CF0;
  --color-on-primary:               #ffffff;
  --color-primary-container:        #F5F3FF;
  --color-on-primary-container:     #482FC2;
  --color-primary-fixed:            #D4CFFE;
  --color-primary-fixed-dim:        #A894FF;
  --color-on-primary-fixed:         #1F1B3A;
  --color-on-primary-fixed-variant: #7C5CF0;
  --color-inverse-primary:          #A894FF;
  --color-surface-tint:             #7C5CF0;

  --color-secondary:                #4B4668;
  --color-on-secondary:             #ffffff;
  --color-secondary-container:      #F5F3FF;
  --color-on-secondary-container:   #1F1B3A;
  --color-secondary-fixed:          #E9E6FF;

  --color-tertiary:                 #7C5CF0;
  --color-on-tertiary:              #ffffff;
  --color-tertiary-container:       #F5F3FF;
  --color-on-tertiary-container:    #482FC2;
  --color-tertiary-fixed:           #D4CFFE;
  --color-tertiary-fixed-dim:       #A894FF;
  --color-on-tertiary-fixed:        #1F1B3A;
  --color-on-tertiary-fixed-variant:#7C5CF0;

  --color-on-background:            #1F1B3A;
  --color-on-surface:               #1F1B3A;
  --color-on-surface-variant:       #4B4668;

  --color-outline:                  #E9E6FF;
  --color-outline-variant:          #D4CFFE;

  --color-error:                    #ba1a1a;
  --color-on-error:                 #ffffff;
  --color-error-container:          #ffdad6;
  --color-on-error-container:       #93000a;

  /* Nav / Header specific */
  --color-header-bg:                rgba(255,255,255,0.92);
  --color-header-border:            #E9E6FF;
  --color-nav-hover:                #F5F3FF;

  /* Footer */
  --color-footer-bg:                #ffffff;
  --color-footer-border:            #E9E6FF;
  --color-footer-text:              #4B4668;
  --color-footer-link-hover:        #7C5CF0;
}

/* ─── DARK MODE ─── */
html.dark {
  --color-background:               #1a1625;
  --color-surface:                  #211d2f;
  --color-surface-bright:           #2d2840;
  --color-surface-dim:              #161221;
  --color-surface-variant:          #2d2840;
  --color-surface-container-lowest: #0f0d14;
  --color-surface-container-low:    #1a1625;
  --color-surface-container:        #211d2f;
  --color-surface-container-high:   #2d2840;
  --color-surface-container-highest:#3a3452;
  --color-inverse-surface:          #f5f3ff;
  --color-inverse-on-surface:       #1F1B3A;

  --color-primary:                  #A894FF;
  --color-on-primary:               #1F1B3A;
  --color-primary-container:        #3a3452;
  --color-on-primary-container:     #D4CFFE;
  --color-primary-fixed:            #D4CFFE;
  --color-primary-fixed-dim:        #A894FF;
  --color-on-primary-fixed:         #1F1B3A;
  --color-on-primary-fixed-variant: #7C5CF0;
  --color-inverse-primary:          #7C5CF0;
  --color-surface-tint:             #A894FF;

  --color-secondary:                #9E99B6;
  --color-on-secondary:             #1F1B3A;
  --color-secondary-container:      #2d2840;
  --color-on-secondary-container:   #F5F3FF;
  --color-secondary-fixed:          #E9E6FF;
  --color-secondary-fixed-dim:      #D4CFFE;
  --color-on-secondary-fixed:       #1F1B3A;
  --color-on-secondary-fixed-variant:#7C5CF0;

  --color-tertiary:                 #A894FF;
  --color-on-tertiary:              #1F1B3A;
  --color-tertiary-container:       #3a3452;
  --color-on-tertiary-container:    #D4CFFE;
  --color-tertiary-fixed:           #D4CFFE;
  --color-tertiary-fixed-dim:       #A894FF;
  --color-on-tertiary-fixed:        #1F1B3A;
  --color-on-tertiary-fixed-variant:#7C5CF0;

  --color-on-background:            #f5f3ff;
  --color-on-surface:               #f5f3ff;
  --color-on-surface-variant:       #9E99B6;

  --color-outline:                  #3a3452;
  --color-outline-variant:          #2d2840;

  --color-error:                    #ffb4ab;
  --color-on-error:                 #690005;
  --color-error-container:          #93000a;
  --color-on-error-container:       #ffdad6;

  /* Nav / Header specific */
  --color-header-bg:                rgba(33, 29, 47, 0.94);
  --color-header-border:            rgba(124, 92, 240, 0.15);
  --color-nav-hover:                rgba(124, 92, 240, 0.10);

  /* Footer */
  --color-footer-bg:                #1a1625;
  --color-footer-border:            rgba(124, 92, 240, 0.15);
  --color-footer-text:              #9E99B6;
  --color-footer-link-hover:        #A894FF;
}

/* ─── GLOBAL RESETS & HELPERS ─── */
*, *::before, *::after { box-sizing: border-box; }

body {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: var(--color-background);
  color: var(--color-on-background);
  transition: background-color 0.25s ease, color 0.25s ease;
}

/* Header / Nav */
.panda-header {
  background: var(--color-header-bg);
  border-bottom-color: var(--color-header-border);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.panda-nav-link {
  color: var(--color-on-surface-variant);
  transition: color 0.15s, border-color 0.15s;
  padding-bottom: 0.25rem;
  border-bottom: 2px solid transparent;
  font-weight: 600;
  text-decoration: none;
}
.panda-nav-link:hover {
  color: var(--color-primary);
  border-bottom-color: var(--color-outline-variant);
}
.panda-nav-link.active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary) !important;
}

.panda-icon-btn {
  color: var(--color-on-surface-variant);
  background: transparent;
  border-radius: 0.5rem;
  transition: background 0.15s, color 0.15s;
}
.panda-icon-btn:hover {
  background: var(--color-nav-hover);
  color: var(--color-on-surface);
}

/* Footer */
.panda-footer {
  background: var(--color-footer-bg);
  border-top-color: var(--color-footer-border);
}
.panda-footer-text { color: var(--color-footer-text); }
.panda-footer-link {
  color: var(--color-footer-text);
  transition: color 0.15s;
}
.panda-footer-link:hover {
  color: var(--color-footer-link-hover);
}

/* ─── MATERIAL ICON FONT SETTINGS ─── */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle;
}

/* ─── ACCESSIBILITY Overrides ─── */
html.high-contrast {
    filter: contrast(125%) saturate(110%);
}
html.reduced-motion * {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
}
html.dyslexic-font *:not(.material-symbols-outlined):not(.material-symbols-rounded):not(.material-icons) {
  font-family: "OpenDyslexic", "Comic Sans MS", sans-serif !important;
}

.material-symbols-outlined,
.material-symbols-rounded,
.material-icons {
  font-family: 'Material Symbols Outlined', 'Material Icons', sans-serif !important;
}
html.large-text {
    font-size: 115%;
}

/* Base Styles */
.shell {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
}

/* ─── SKIP TO CONTENT LINK ─── */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--color-primary);
  color: var(--color-on-primary);
  padding: 8px 16px;
  text-decoration: none;
  font-weight: 700;
  border-radius: 0 0 8px 0;
  z-index: 10000;
  transition: top 0.3s;
}
.skip-link:focus {
  top: 0;
}

/* ─── MAIN CONTENT FOCUS (from skip link) ─── */
#main-content:focus {
  outline: 3px solid var(--color-primary);
  outline-offset: -3px;
}

/* ─── FOCUS RING ─── */
:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Better focus for buttons */
button:focus-visible,
a:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(8, 145, 178, 0.2);
}

/* Icon-only button accessibility */
.icon-only {
  position: relative;
}

/* Screen reader only text */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* High contrast mode improvements */
html.high-contrast .panda-nav-link:hover,
html.high-contrast .panda-footer-link:hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

/* Reduced motion - preserve functionality */
html.reduced-motion .panda-card:hover,
html.reduced-motion .panda-feature-card:hover {
  transform: none !important;
}

/* Large text improvements */
html.large-text .panda-header {
  min-height: 70px;
}
html.large-text .panda-nav-link {
  font-size: 1.1em;
}

/* Hide scrollbar utility */
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}