/* ========== RESET & THEME TOKENS ========== */
*{margin:0;padding:0;box-sizing:border-box}
:root{
  --padding:1.75rem;
  --color-bg:#0c0d11;
  --color-elev:#16171e;
  --color-elev-2:#1b1c23;
  --color-border:#242530;
  --color-border-soft:#1d1e28;
  --color-text:#f4f4f6;
  --color-text-dim:#c8cad5;
  --color-accent:#f0f0f0;
  --color-accent-muted:#c6c7cf;
  --shadow-soft:0 16px 40px rgba(0,0,0,.35);
  --shadow-raised:0 22px 60px rgba(0,0,0,.45);
  --radius:14px;

  /* Card Design System (based on Workshops design language) */
  --card-radius:12px;
  --card-radius-media:16px;
  --card-border:rgba(255,255,255,0.08);
  --card-border-hover:rgba(255,255,255,0.15);
  --card-bg:rgba(255,255,255,0.03);
  --card-bg-hover:rgba(255,255,255,0.06);
  --card-transition:background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
  --font-family-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
  --font-family-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  /* Flat Glass Design System Tokens */
  --glass-subtle:rgba(255,255,255,0.03);
  --glass-medium:rgba(255,255,255,0.06);
  --glass-strong:rgba(255,255,255,0.12);
  --border-subtle:rgba(255,255,255,0.08);
  --border-medium:rgba(255,255,255,0.12);
  --border-strong:rgba(255,255,255,0.15);
  --radius-sm:8px;
  --radius-md:12px;
  --radius-lg:16px;
  --transition-fast:0.15s ease;
  --transition-base:0.2s ease;
  --transition-medium:0.25s ease;
  --transition-slow:0.3s ease;

  /* Accent Color System - Injected dynamically, defaults to blue (dark theme) */
  --accent-primary:#5B7EFF;
  --accent-primary-rgb:91, 126, 255;
  --accent-hover:#7795FF;
}

html[data-theme="light"]{
  --color-bg:#f7f7fa;
  --color-elev:#ffffff;
  --color-elev-2:#f2f2f7;
  --color-border:#dedfe5;
  --color-border-soft:#e8e9ef;
  --color-text:#1f2028;
  --color-text-dim:#4a4c5f;
  --color-accent:#1d1f29;
  --color-accent-muted:#454958;
  --shadow-soft:0 12px 28px rgba(31,33,43,.08);
  --shadow-raised:0 20px 40px rgba(31,33,43,.12);

  /* Card Design System (Light theme overrides) */
  --card-border:rgba(0,0,0,0.08);
  --card-border-hover:rgba(0,0,0,0.15);
  --card-bg:rgba(0,0,0,0.02);
  --card-bg-hover:rgba(0,0,0,0.05);

  /* Flat Glass Design System (Light theme overrides) */
  --glass-subtle:rgba(0,0,0,0.02);
  --glass-medium:rgba(0,0,0,0.05);
  --glass-strong:rgba(0,0,0,0.08);
  --border-subtle:rgba(0,0,0,0.08);
  --border-medium:rgba(0,0,0,0.12);
  --border-strong:rgba(0,0,0,0.15);

  /* Accent Color System - Light theme defaults */
  --accent-primary:#4469FF;
  --accent-primary-rgb:68, 105, 255;
  --accent-hover:#3755C8;
}

html{
  font-family:var(--font-family-sans);
  background:var(--color-bg);
  color:var(--color-text);
  transition:background var(--transition-base),color var(--transition-base);
  overflow-x:hidden;
  min-height:100vh;
}
body{
  padding:0 var(--padding) 0;
  margin:0;
  width:100%;
  overflow-x:hidden;
  transition:background var(--transition-base),color var(--transition-base);
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
.main{
  flex:1 0 auto;
  display:block;
  margin-bottom:5rem;
  max-width:1400px;
  width:100%;
  margin-left:auto;
  margin-right:auto;
  box-sizing:border-box;
}
img{width:100%;display:block}

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

/* ========== ACCESSIBILITY ========== */
/* Global focus styles for keyboard navigation */
*:focus{outline:none}
*:focus-visible{
  outline:2px solid rgba(var(--accent-primary-rgb),0.85);
  outline-offset:3px;
  border-radius:var(--radius-sm);
}

/* Skip navigation link - visible only when focused */
.skip-link{
  position:absolute;
  left:-9999px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
  z-index:9999;
  background:rgba(var(--accent-primary-rgb),0.95);
  color:#ffffff;
  padding:1rem 1.5rem;
  font-weight:600;
  font-size:0.95rem;
  text-decoration:none;
  border-radius:var(--radius-sm);
  box-shadow:0 8px 24px rgba(0,0,0,0.4);
}
.skip-link:focus{
  position:fixed;
  top:1rem;
  left:1rem;
  width:auto;
  height:auto;
  overflow:visible;
}

/* Light theme focus adjustments */
html[data-theme="light"] *:focus-visible{
  outline:2px solid rgba(var(--accent-primary-rgb),0.9);
}
html[data-theme="light"] .skip-link{
  background:rgba(var(--accent-primary-rgb),0.95);
  color:#ffffff;
  box-shadow:0 8px 24px rgba(0,0,0,0.15);
}

/* ========== TYPOGRAPHY & LINKS ========== */
a{color:inherit;text-decoration:none;transition:color var(--transition-base)}
a:hover{color:var(--color-accent)}
small{color:var(--color-text-dim)}
strong,b{font-weight:600}
.text{line-height:1.65}
.text a{text-decoration:underline}
.text h1,.h1,.intro{font-size:2.1rem;margin-bottom:1.35rem;line-height:1.2}
.text h2,.h2{font-size:1.2rem;font-weight:700;margin-bottom:.85rem}

/* ========== HEADER / NAVIGATION ========== */
.site-header{
  position:sticky;top:0;z-index:30;
  margin-bottom:2.4rem;
  margin-left:calc(var(--padding) * -1);
  margin-right:calc(var(--padding) * -1);
  background:var(--color-bg);
  border-bottom:1px solid var(--color-border);
}
.site-header__inner{
  display:flex;align-items:center;gap:1.5rem;justify-content:space-between;
  padding:1.25rem var(--padding);
  max-width:1400px;
  width:100%;
  margin:0 auto;
  box-sizing:border-box;
}
.site-header__logo{display:inline-flex;align-items:center;gap:.65rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;flex-shrink:0}
.site-header__logo img{height:54px;width:180px;display:block;filter:grayscale(100%)}

.nav-menu{display:flex;align-items:center;justify-content:center;gap:1.5rem;flex:1;min-width:0;overflow:hidden}
.nav-menu a{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  color:var(--color-text);
  font-weight:600;
  font-size:clamp(.85rem, 1.5vw, .92rem);
  letter-spacing:.01em;
  padding:.5rem 1rem;
  border-radius:var(--radius-md);
  background:transparent;
  transition:background var(--transition-base);
  white-space:nowrap;
}
.nav-menu a svg{
  width:20px;
  height:20px;
  stroke:currentColor;
  flex-shrink:0;
}
.nav-menu a:hover,
.nav-menu a[aria-current]{
  background:rgba(255,255,255,0.08);
}

html[data-theme="light"] .nav-menu a:hover,
html[data-theme="light"] .nav-menu a[aria-current]{
  background:rgba(0,0,0,0.06);
}

.site-header__actions{display:flex;align-items:center;gap:.75rem;margin-left:auto;flex-shrink:0}

.theme-toggle{
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:var(--radius-md);
  border:0;
  background:transparent;
  color:var(--color-text);
  cursor:pointer;
  transition:background var(--transition-base);
}
.theme-toggle:hover{
  background:rgba(255,255,255,0.08);
}

html[data-theme="light"] .theme-toggle:hover{
  background:rgba(0,0,0,0.06);
}
.theme-toggle svg{width:20px;height:20px;stroke:currentColor;transition:opacity .18s ease,transform .18s ease}
.theme-toggle__icon{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;transform:scale(.7)}
.theme-toggle__icon--sun{opacity:1;transform:scale(1)}
html[data-theme="light"] .theme-toggle__icon--sun{opacity:0;transform:scale(.7)}
html[data-theme="light"] .theme-toggle__icon--moon{opacity:1;transform:scale(1)}

/* ========== GENERIC LAYOUT HELPERS ========== */
.section{padding:2.25rem 0}
.align-center{text-align:center}

.grid{--gutter:1.5rem;display:grid;grid-gap:var(--gutter)}
.autogrid{--gutter:1.5rem;--min:14rem;display:grid;grid-gap:var(--gutter);grid-template-columns:repeat(auto-fit,minmax(var(--min),1fr))}

.box{background:var(--color-elev);border:1px solid var(--color-border);border-radius:var(--radius);padding:1.2rem;box-shadow:var(--shadow-soft)}
.cta{
  display:inline-flex;align-items:center;gap:.6rem;padding:.75rem 1.2rem;
  background:var(--color-accent);color:var(--color-bg);border-radius:var(--radius-md);border:0;font-weight:600;transition:transform var(--transition-base),box-shadow var(--transition-base)}
.cta:hover{transform:translateY(-1px);box-shadow:0 16px 34px rgba(0,0,0,.35)}

/* ========== PAGINATION ========== */
.pagination{display:flex;gap:.5rem;align-items:center;justify-content:center;padding:3rem 0}
.pagination>span{color:var(--color-text-dim)}
.pagination>*{
  height:2.4rem;min-width:2.4rem;padding:.4rem .6rem;border-radius:var(--radius-md);
  border:1px solid var(--color-border);display:grid;place-items:center;
  color:var(--color-text-dim);background:var(--color-elev);
  transition:background var(--transition-base),border var(--transition-base),color var(--transition-base);
}
.pagination>a:hover{color:var(--color-text);border-color:var(--color-accent-muted);background:rgba(255,255,255,.05)}
.pagination .is-active{color:var(--color-bg);background:var(--color-text);border-color:var(--color-text)}

/* ========== FOOTER ========== */
.footer{
  margin-top:3rem;padding:2.25rem 1.5rem;
  background:var(--color-elev-2);border:1px solid var(--color-border);
  box-shadow:var(--shadow-soft);
}
.footer .brand{font-size:2rem;font-weight:900;letter-spacing:.2px;margin-bottom:1rem}
.footer ul{display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:.65rem 1.5rem}
.footer li{list-style:none;color:var(--color-text-dim)}
hr{border:0;height:1px;background:var(--color-border-soft);margin:2.4rem 0}

/* ========== RESPONSIVE BREAKPOINTS ========== */
/* Tailwind-inspired breakpoint system:
   XS: 0-639px (mobile, base styles)
   SM: 640px+ (40rem) - large phones, small tablets
   MD: 768px+ (48rem) - tablets portrait, iPad
   LG: 1024px+ (64rem) - tablets landscape, laptops
   XL: 1280px+ (80rem) - desktops, large screens
*/

/* SM: 640px+ */
@media (min-width:40rem){
  /* Spacing adjustments for tablets */
}

/* MD: 768px+ */
@media (min-width:48rem){
  /* Tablet portrait optimizations */
}

/* LG: 1024px+ */
@media (min-width:64rem){
  body{--padding:2.25rem}
  .text h1,.h1,.intro{font-size:2.35rem}
  .site-header__inner{padding:1.25rem 2.25rem}
  .nav-menu{gap:1.5rem}

  /* Reset to desktop layout: left-aligned logo */
  .site-header__logo{
    position:static;
    transform:none;
  }

  .site-header__actions{
    width:auto;
    margin-left:auto;
    gap:.75rem;
    padding:0;
  }

  .burger-menu{
    order:0;
  }
}

/* XL: 1280px+ */
@media (min-width:80rem){
  .nav-menu{gap:2rem}
  .site-header__inner{padding:1.25rem 2.5rem}
}

/* Mobile/Tablet overrides */
@media (max-width:63.99rem){
  .site-header__inner{
    padding:1.1rem var(--padding);
    position:relative;
  }

  /* Centered logo with burger left, theme toggle right */
  .site-header__logo{
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    z-index:1;
  }

  .site-header__actions{
    width:100%;
    justify-content:space-between;
    margin-left:0;
    gap:0;
    padding:0 .5rem;
  }

  /* Ensure burger is on the left */
  .burger-menu{
    order:-1;
  }
}

@media (max-width:40rem){
  body{--padding:2rem}
  .site-header__inner{padding:1rem var(--padding)}
}