/* foundation.css – responsive base layer */
/* 1. CSS Reset (lightweight) */
*,*::before,*::after{box-sizing:border-box;}
body,h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd{margin:0;}
ul[role='list'],ol[role='list']{list-style:none;margin:0;padding:0;}
html:focus-within{scroll-behavior:smooth;}
body{min-height:100dvh;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;}
img,video,canvas,svg{display:block;max-width:100%;}
input,button,textarea,select{font:inherit;}

/* 2. Design Tokens */
:root {
  /* Color (semantic)
     IMPORTANT: Story page base background must remain #202029 (Trinkagrey) so diorama frames melt into page.
     #161721 retained as loop grey (loopgrey) but NOT used for primary story body background. */
  --color-bg: #202029; /* Trinkagrey canonical */
  --color-bg-alt: #262833; /* previous surface-like alt repurposed */
  --loopgrey: #161721; /* Honoring Loopsmith – allowed for accents, NOT for story page body */
  --color-surface: #262833;
  --color-surface-raised: #2f3240;
  --color-border: #3d4050;
  --color-border-strong: #5a5e73;
  --color-text: #D6D7E2;
  --color-text-soft: #ACABBB;
  --color-accent: #2AFFF7;
  --color-accent-alt: #6A00FF;
  --color-warn: #ffb347;
  --color-danger: #ff4d55;
  --color-focus-ring: var(--color-accent);

  /* Elevation (shadows) */
  --shadow-1: 0 2px 4px -2px rgba(0,0,0,.4),0 1px 2px rgba(0,0,0,.3);
  --shadow-2: 0 4px 10px -2px rgba(0,0,0,.5),0 2px 4px rgba(0,0,0,.35);

  /* Spacing scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;

  /* Radius */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;

  /* Typography families */
  --font-sans: system-ui,-apple-system,'Segoe UI',Roboto,'Noto Sans',sans-serif;
  --font-display: 'Noto Serif',serif;
  /* (Will be replaced by Trinkatype families when loaded) */

  /* Fluid Type Scale */
  --font-size-0: clamp(.72rem, .25vw + .6rem, .78rem);
  --font-size-1: clamp(.82rem, .3vw + .7rem, .9rem);
  --font-size-2: clamp(.95rem, .4vw + .8rem, 1.05rem); /* base body */
  --font-size-3: clamp(1.15rem, .7vw + .9rem, 1.35rem);
  --font-size-4: clamp(1.45rem, 1.2vw + 1rem, 1.9rem);
  --font-size-5: clamp(1.85rem, 2vw + 1.1rem, 2.6rem);
  --font-size-6: clamp(2.4rem, 3vw + 1.3rem, 3.3rem);

  --line-height-tight: 1.15;
  --line-height-body: 1.55;
  --line-height-loose: 1.75;

  /* Content width */
  --max-readable: 65ch;
  --grid-max: 1400px;
  --grid-pad-inline: clamp(var(--space-4), 3vw, var(--space-7));

  /* Motion */
  --motion-fast: 120ms;
  --motion-medium: 220ms;
  --motion-slow: 480ms;
}

/* Dark scheme alt hook (future) */
@media (prefers-color-scheme: light){
  :root { --color-bg:#f6f7fb; --color-bg-alt:#eceef3; --color-text:#1d2028; --color-text-soft:#4b5060; --color-surface:#ffffff; --color-border:#d0d3dc; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 1ms !important; animation-iteration-count:1 !important; transition-duration: 1ms !important; }
}

/* 3. Base Elements */
html { background: var(--color-bg); color: var(--color-text-soft); font-family: var(--font-sans); font-size: 16px; }
body { background: var(--color-bg); color: var(--color-text-soft); font-size: var(--font-size-2); line-height: var(--line-height-body); }

h1,h2,h3,h4,h5,h6 { font-family: var(--font-display); font-weight:600; line-height: var(--line-height-tight); color: var(--color-text); margin-bottom: var(--space-3); }

h1 { font-size: var(--font-size-6); }
h2 { font-size: var(--font-size-5); }
h3 { font-size: var(--font-size-4); }

p,ul,ol { margin-bottom: var(--space-4); }

/* 4. Layout Helpers */
.layout { max-width: var(--grid-max); margin-inline: auto; padding-inline: var(--grid-pad-inline); width:100%; }
.readable { max-width: var(--max-readable); }
.stack > * + * { margin-top: var(--space-4); }
.cluster { display:flex; flex-wrap:wrap; gap: var(--space-3); align-items:center; }

/* 5. Links & Buttons */
a { color: var(--color-accent); text-decoration:none; }
a:hover,a:focus { text-decoration:underline; }

.button { --btn-bg: var(--color-surface); --btn-border: var(--color-border); --btn-fg: var(--color-text); display:inline-flex; gap:.5ch; align-items:center; border:1px solid var(--btn-border); background:var(--btn-bg); color:var(--btn-fg); padding: .65rem 1rem; border-radius: var(--radius-md); font-size: var(--font-size-1); cursor:pointer; transition: background var(--motion-medium), color var(--motion-medium), border-color var(--motion-medium); }
.button:hover,.button:focus { background: var(--color-surface-raised); border-color: var(--color-accent); color: var(--color-text); }
.button.primary { --btn-bg: linear-gradient(135deg,#1d2b37,#253847); --btn-border: var(--color-accent); }
.button.primary:hover { filter: brightness(1.15); }

/* 6. Focus Styles */
:where(a,button,[role='button'],input,select,textarea):focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset:2px; }

/* 7. Utility */
.text-soft { color: var(--color-text-soft); }
.text-accent { color: var(--color-accent); }
.mt-0 { margin-top:0; }
.mb-0 { margin-bottom:0; }
.flow > * + * { margin-top: var(--space-3); }
.center { text-align:center; }
.pad-y { padding-block: var(--space-7); }
.surface { background: var(--color-surface); border:1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-1); }
.inner-pad { padding: var(--space-6) var(--space-5); }

/* 8. Skip Link */
.skip-link { position:absolute; left:-999px; top:auto; width:1px; height:1px; overflow:hidden; }
.skip-link:focus { position:fixed; left: var(--space-4); top: var(--space-4); width:auto; height:auto; padding:.75rem 1rem; background: var(--color-accent); color:#041014; border-radius: var(--radius-sm); z-index: calc(var(--z-a1-foreground, 1050) + 5); }

/* 9. Media Queries (example tweak) */
@media (max-width: 720px) {
  .inner-pad { padding: var(--space-5) var(--space-4); }
  h1 { font-size: clamp(1.9rem, 6vw + 1.1rem, 2.6rem); }
  h2 { font-size: clamp(1.5rem, 4.5vw + 1rem, 2.1rem); }
}

/* Portal buttons now styled exclusively inline in portal.html (legacy aesthetic lock-in) */

/* Sparkle cursor layer container */
@keyframes spark-pop { 0%{opacity:0; transform:translate(-50%,-50%) scale(.25);} 10%{opacity:1;} 60%{opacity:.9; transform:translate(-50%,-50%) scale(1);} 100%{opacity:0; transform:translate(-50%,-50%) scale(1.6);} }

/* Menu icon replacements (PNG-based) with ixu scaling */
/* ixu = immersive unit already provided elsewhere (fallback 60px) */
:root { --ixu: var(--ixu, 60px); --menu-main-scale:.8; --menu-eam-scale:.6; --menu-ui-scale:.4; }
.a5-drawer-toggle, .eam-toggle, .a3-edit-btn { position: fixed; background: transparent; aspect-ratio:1/1; }
.a5-drawer-toggle svg, .eam-toggle svg { display:none !important; }
.a5-drawer-toggle { width:calc(var(--ixu) * var(--menu-main-scale)); height:calc(var(--ixu) * var(--menu-main-scale)); background: url('/assets/menu/main-menu.png') center/contain no-repeat !important; top:10px; left:10px; border:none; box-shadow:none; }
.eam-toggle { width:calc(var(--ixu) * var(--menu-eam-scale)); height:calc(var(--ixu) * var(--menu-eam-scale)); background: url('/assets/menu/eam-menu.png') center/contain no-repeat !important; bottom:10px; right:10px; border:none; box-shadow:none; }
.a3-edit-btn { width:calc(var(--ixu) * var(--menu-ui-scale)); height:calc(var(--ixu) * var(--menu-ui-scale)); background: url('/assets/menu/UI-menu.png') center/contain no-repeat !important; top:10px; right:calc(10px + var(--ixu) * var(--menu-main-scale) + 4px); border:none; }
@media (max-width:700px){
  :root { --menu-main-scale:.7; --menu-eam-scale:.55; --menu-ui-scale:.38; }
  .a3-edit-btn { right:calc(10px + var(--ixu) * var(--menu-main-scale) + 2px); }
}
.a5-drawer-toggle:focus-visible, .eam-toggle:focus-visible, .a3-edit-btn:focus-visible { outline:2px solid var(--color-accent); outline-offset:4px; border-radius:12px; }