/* ── TESTME 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.
   ─────────────────────────────────────────────────────────────── */

@font-face {
  font-family: 'OpenDyslexic';
  src: url('https://cdn.jsdelivr.net/npm/open-dyslexic@1.0.3/fonts/OpenDyslexic-Regular.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* ─── LIGHT MODE (default) ─── */
:root,
html.light {
  --color-background:               #f6feff;
  --color-surface:                  #f6feff;
  --color-surface-bright:           #ffffff;
  --color-surface-dim:              #d0e8ec;
  --color-surface-variant:          #dff0f4;
  --color-surface-container-lowest: #ffffff;
  --color-surface-container-low:    #eef8fa;
  --color-surface-container:        #e6f4f7;
  --color-surface-container-high:   #dceef2;
  --color-surface-container-highest:#d0e8ec;
  --color-inverse-surface:          #1a2e32;
  --color-inverse-on-surface:       #eef8fa;

  /* Cyan pastel primary */
  --color-primary:                  #0891b2;
  --color-on-primary:               #ffffff;
  --color-primary-container:        #cffafe;
  --color-on-primary-container:     #083344;
  --color-primary-fixed:            #a5f3fc;
  --color-primary-fixed-dim:        #67e8f9;
  --color-on-primary-fixed:         #062b35;
  --color-on-primary-fixed-variant: #0e7490;
  --color-inverse-primary:          #67e8f9;
  --color-surface-tint:             #06b6d4;

  --color-secondary:                #0e7490;
  --color-on-secondary:             #ffffff;
  --color-secondary-container:      #cffafe;
  --color-on-secondary-container:   #083344;
  --color-secondary-fixed:          #a5f3fc;

  --color-tertiary:                 #6366f1;
  --color-on-tertiary:              #ffffff;
  --color-tertiary-container:       #e0e7ff;
  --color-on-tertiary-container:    #312e81;
  --color-tertiary-fixed:           #c7d2fe;
  --color-tertiary-fixed-dim:       #a5b4fc;
  --color-on-tertiary-fixed:        #1e1b4b;
  --color-on-tertiary-fixed-variant:#4338ca;

  --color-on-background:            #0c1a1f;
  --color-on-surface:               #0c1a1f;
  --color-on-surface-variant:       #2d5260;

  --color-outline:                  #5b8a97;
  --color-outline-variant:          #b0d4dc;

  --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:            #e0f2f7;
  --color-nav-hover:                #f0fafc;

  /* Footer */
  --color-footer-bg:                #f0fafc;
  --color-footer-border:            #caeaf0;
  --color-footer-text:              #4a7a88;
  --color-footer-link-hover:        #0891b2;
}

/* ─── DARK MODE ─── */
html.dark {
  --color-background:               #0f1416;
  --color-surface:                  #121719;
  --color-surface-bright:           #363a3c;
  --color-surface-dim:              #0f1416;
  --color-surface-variant:          #3e4948;
  --color-surface-container-lowest: #0a0d0f;
  --color-surface-container-low:    #191c1e;
  --color-surface-container:        #1d2022;
  --color-surface-container-high:   #282b2d;
  --color-surface-container-highest:#323638;
  --color-inverse-surface:          #e0e3e5;
  --color-inverse-on-surface:       #2d3133;

  --color-primary:                  #84d4d3;
  --color-on-primary:               #003737;
  --color-primary-container:        #004f50;
  --color-on-primary-container:     #a0f0f0;
  --color-primary-fixed:            #a0f0f0;
  --color-primary-fixed-dim:        #84d4d3;
  --color-on-primary-fixed:         #002020;
  --color-on-primary-fixed-variant: #004f50;
  --color-inverse-primary:          #005454;
  --color-surface-tint:             #84d4d3;

  --color-secondary:                #a1ccec;
  --color-on-secondary:             #073347;
  --color-secondary-container:      #1d4b66;
  --color-on-secondary-container:   #c8e6ff;
  --color-secondary-fixed:          #c8e6ff;
  --color-secondary-fixed-dim:      #a1ccec;
  --color-on-secondary-fixed:       #001e2f;
  --color-on-secondary-fixed-variant: #1d4b66;

  --color-tertiary:                 #95d4b3;
  --color-on-tertiary:              #003824;
  --color-tertiary-container:       #0e5138;
  --color-on-tertiary-container:    #b1f0ce;
  --color-tertiary-fixed:           #b1f0ce;
  --color-tertiary-fixed-dim:       #95d4b3;
  --color-on-tertiary-fixed:        #002114;
  --color-on-tertiary-fixed-variant:#0e5138;

  --color-on-background:            #e0e3e5;
  --color-on-surface:               #e0e3e5;
  --color-on-surface-variant:       #bec9c8;

  --color-outline:                  #889392;
  --color-outline-variant:          #3e4948;

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

  /* Nav / Header specific */
  --color-header-bg:                rgba(18, 23, 25, 0.94);
  --color-header-border:            rgba(255,255,255,0.07);
  --color-nav-hover:                rgba(255,255,255,0.06);

  /* Footer */
  --color-footer-bg:                #0f1416;
  --color-footer-border:            rgba(255,255,255,0.08);
  --color-footer-text:              #889392;
  --color-footer-link-hover:        #84d4d3;
}

/* ─── 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,
.material-symbols-rounded,
.material-symbols-sharp,
.material-icons {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle;
}

/* ─── ACCESSIBILITY Overrides ─── */
html.high-contrast {
    filter: contrast(150%) saturate(120%);
}
html.high-contrast body {
    background-color: #ffffff !important;
    color: #000000 !important;
}
html.high-contrast a { color: #0000cc !important; }
html.high-contrast button, html.high-contrast [role="button"] {
    border: 2px solid currentColor !important;
}
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-symbols-sharp):not(.material-icons) {
    font-family: "OpenDyslexic", "Comic Sans MS", sans-serif !important;
}
html.dyslexic-font .material-symbols-outlined,
html.dyslexic-font .material-symbols-rounded,
html.dyslexic-font .material-symbols-sharp,
html.dyslexic-font .material-icons {
    font-family: 'Material Symbols Outlined', 'Material Icons' !important;
}
html.large-text {
    font-size: 115%;
}

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

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

/* ─── RESPECT SYSTEM REDUCED MOTION ─── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}