/*
 * HALDE editorial system — shared foundation
 *
 * Stable layout, accessibility, and page-ground behavior shared by every
 * route. Palette decisions come exclusively from semantics.css and themes.
 *
 * Scoped to html[data-design-system="halde"] so the direction can be reviewed,
 * migrated, or disabled without touching product content or domain code.
 */

html[data-design-system="halde"]{
  background:var(--bg-page);
  scroll-behavior:smooth;
}

html[data-design-system="halde"] body{
  min-height:100dvh;
  overflow-x:hidden;
  background:var(--bg-page);
  color:var(--text-primary);
  font-family:var(--font-editorial);
  font-size:clamp(16px,.25vw + 15px,18px);
  line-height:var(--leading-body);
  text-rendering:optimizeLegibility;
}

html[data-design-system="halde"] ::selection{
  background:var(--text-primary);
  color:var(--bg-page);
}

html[data-design-system="halde"] :where(a,button,input,select,summary,[tabindex]):focus-visible{
  outline:2px solid var(--text-primary);
  outline-offset:4px;
}

html[data-design-system="halde"] :where(h1,h2,h3,.disp){
  color:var(--text-primary);
  font-family:var(--font-editorial);
  font-variation-settings:"wght" 420;
  font-weight:420;
  letter-spacing:var(--tracking-display);
  text-wrap:balance;
}

html[data-design-system="halde"] .disp{
  line-height:.96;
  text-transform:none;
}

html[data-design-system="halde"] :where(.lab,.tag,.mono){
  font-family:var(--font-technical);
}

html[data-design-system="halde"] :where(.lab,.tag){
  color:var(--text-secondary);
  font-size:10px;
  font-weight:500;
  letter-spacing:var(--tracking-meta);
  line-height:1.5;
  text-transform:uppercase;
}

html[data-design-system="halde"] mark.play-mark{
  padding:0;
  background:none;
  color:inherit;
  box-shadow:inset 0 -1px 0 var(--text-tertiary);
}

/* Ground and section frame */
html[data-design-system="halde"] .stack{
  isolation:isolate;
  position:relative;
  max-width:none;
  padding-bottom:0;
  background:
    radial-gradient(circle at 50% -10%,color-mix(in srgb,var(--text-primary) 4.5%,transparent),transparent 34rem),
    var(--bg-page);
}

html[data-design-system="halde"] #app > .mast + .stack{
  padding-top:var(--mast-offset);
}

html[data-design-system="halde"] .stack::before{
  content:"";
  position:absolute;
  z-index:0;
  inset:0;
  pointer-events:none;
  opacity:var(--texture-opacity);
  background-image:var(--texture-image);
  background-size:420px 420px;
  mix-blend-mode:var(--texture-blend);
}

html[data-design-system="halde"] .stack > .pnl{
  z-index:1;
  width:100%;
  padding-inline:var(--page-gutter);
  border-color:var(--border-default);
  background:transparent;
  color:var(--text-primary);
  --f:var(--bg-surface);
}

html[data-design-system="halde"] .stack > .pnl:nth-of-type(even){
  background:transparent;
}

html[data-design-system="halde"] .stack > .pnl::after{
  display:none;
}

html[data-design-system="halde"] .stack > .pnl.f-mari,
html[data-design-system="halde"] .stack > .pnl.f-sage{
  background:var(--bg-surface);
}

html[data-design-system="halde"] .stack > .pnl.f-slate{
  background:var(--bg-inverse);
  color:var(--text-inverse);
}

html[data-design-system="halde"] #app section.pnl + section.pnl{
  border-top-color:var(--border-default);
}

/* Fixed editorial navigation */
html[data-design-system="halde"] header.mast{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  z-index:50;
  border-bottom:1px solid transparent;
  background:transparent;
  color:var(--text-primary);
  transition:
    background-color var(--duration-ui) ease,
    border-color var(--duration-ui) ease,
    -webkit-backdrop-filter var(--duration-ui) ease,
    backdrop-filter var(--duration-ui) ease;
}

html[data-design-system="halde"] header.mast.is-scrolled{
  border-bottom-color:var(--border-subtle);
  background:color-mix(in srgb,var(--bg-page) 82%,transparent);
}

@supports (backdrop-filter:blur(1px)){
  html[data-design-system="halde"] header.mast.is-scrolled{
    -webkit-backdrop-filter:blur(16px) saturate(115%);
    backdrop-filter:blur(16px) saturate(115%);
  }
}

html[data-design-system="halde"] .mastin{
  width:min(100%,var(--content-max));
  height:64px;
  margin-inline:auto;
  padding:14px var(--page-gutter);
}

html[data-design-system="halde"] .mastin > a img{
  filter:grayscale(1) brightness(0) invert(1);
}

html[data-design-system="halde"] .mastnav{
  gap:clamp(14px,2.5vw,40px);
  color:var(--text-secondary);
  font:500 10px/1 var(--font-technical);
  letter-spacing:.06em;
  text-transform:uppercase;
}

html[data-design-system="halde"] .mastnav .lnk{
  padding-block:8px;
  text-decoration:none;
}

html[data-design-system="halde"] .mastnav .lnk:hover,
html[data-design-system="halde"] .mastnav .lnk.here{
  color:var(--text-primary);
}

html[data-design-system="halde"] .mastnav .lnk.here{
  box-shadow:inset 0 -1px 0 currentColor;
}

html[data-design-system="halde"] .key-help{
  color:var(--text-tertiary);
  font:500 9px/1 var(--font-technical);
  letter-spacing:.06em;
  text-transform:uppercase;
}

html[data-design-system="halde"] .mastnav > a > kbd,
html[data-design-system="halde"] .key-help kbd{
  border-color:var(--border-strong);
  background:transparent;
  box-shadow:none;
  color:var(--text-secondary);
}

html[data-design-system="halde"] .mastnav .btn2.sm{
  min-height:32px;
  padding:7px 12px;
}

/* Shared actions */
html[data-design-system="halde"] :where(.btn,.btn2,.run-play-replay,.run-playback-toggle){
  min-height:42px;
  justify-content:center;
  border-radius:0!important;
  box-shadow:none!important;
  font-family:var(--font-technical);
  font-size:10px;
  font-weight:500;
  letter-spacing:.08em;
  line-height:1;
  text-transform:uppercase;
  transition:
    background-color var(--duration-ui) ease,
    border-color var(--duration-ui) ease,
    color var(--duration-ui) ease;
}

html[data-design-system="halde"] .btn{
  border:1px solid var(--text-primary);
  background:var(--text-primary);
  color:var(--bg-page);
}

html[data-design-system="halde"] .btn:hover,
html[data-design-system="halde"] .btn.ready:hover{
  border-color:var(--accent);
  background:var(--accent);
  color:var(--text-on-accent);
}

html[data-design-system="halde"] .btn2{
  border:1px solid color-mix(in srgb,var(--text-primary) 58%,transparent)!important;
  background:transparent!important;
  color:var(--text-primary);
}

html[data-design-system="halde"] .btn2:hover{
  border-color:var(--text-primary)!important;
  background:var(--text-primary)!important;
  color:var(--bg-surface);
}

html[data-design-system="halde"] .lnk{
  text-decoration-color:var(--text-tertiary);
  text-decoration-thickness:1px;
}

html[data-design-system="halde"] .lnk:hover{
  color:var(--text-primary);
  text-decoration-color:var(--text-primary);
}

html[data-design-system="halde"] :where(.chip,.intw){
  border:1px solid var(--border-default);
  border-radius:0!important;
  background:transparent;
  color:var(--text-secondary);
  font-family:var(--font-technical);
  font-size:10px;
  letter-spacing:.05em;
  text-transform:uppercase;
}

html[data-design-system="halde"] :where(.chip,.intw):hover,
html[data-design-system="halde"] :where(.chip,.intw).on{
  border-color:var(--text-primary);
  background:var(--text-primary);
  color:var(--bg-page);
}

html[data-design-system="halde"] :where(input,select,textarea){
  border-color:var(--border-strong);
  background:transparent;
  color:var(--text-primary);
  caret-color:var(--accent);
}

html[data-design-system="halde"] :where(input,textarea)::placeholder{
  color:var(--text-tertiary);
  opacity:1;
}

html[data-design-system="halde"] .catalog-search{
  border-color:var(--border-strong)!important;
  border-radius:0!important;
  background:transparent!important;
  color:var(--text-primary);
}

/* Overlay baseline */
html[data-design-system="halde"] :where(.sheet,.key-guide){
  border:1px solid var(--border-default);
  border-radius:0!important;
  background:var(--bg-elevated);
  color:var(--text-primary);
  box-shadow:var(--shadow-strong);
}

html[data-design-system="halde"] .scrim{
  background:color-mix(in srgb,var(--bg-page) 82%,transparent);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
}

/* Migration primitives for section-by-section work */
html[data-design-system="halde"] .cine-section{
  padding-block:var(--section-space);
}

html[data-design-system="halde"] .cine-grid{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:clamp(16px,2vw,32px);
  width:min(100%,var(--content-max));
  margin-inline:auto;
}

html[data-design-system="halde"] .cine-meta{
  color:var(--text-secondary);
  font:500 10px/1.5 var(--font-technical);
  letter-spacing:var(--tracking-meta);
  text-transform:uppercase;
}

html[data-design-system="halde"] .cine-rule{
  border-color:var(--border-default);
}

html[data-design-system="halde"] .cine-reveal{
  opacity:0;
  transform:translateY(28px);
  transition:
    opacity var(--duration-reveal) var(--ease-reveal),
    transform var(--duration-reveal) var(--ease-reveal);
}

html[data-design-system="halde"] .cine-reveal.in{
  opacity:1;
  transform:none;
}

html[data-design-system="halde"] .cine-mask{
  clip-path:inset(0 0 100% 0);
  transition:clip-path var(--duration-mask) var(--ease-reveal);
}

html[data-design-system="halde"] .cine-mask.in{
  clip-path:inset(0);
}

html[data-design-system="halde"] .cine-media{
  overflow:hidden;
  background:var(--bg-surface-muted);
}

html[data-design-system="halde"] .cine-media :where(img,video){
  width:100%;
  height:100%;
  object-fit:cover;
  filter:grayscale(.3) contrast(1.05);
  transition:
    filter 700ms var(--ease-reveal),
    transform 900ms var(--ease-reveal);
}

html[data-design-system="halde"] .cine-media:hover :where(img,video){
  filter:grayscale(0) contrast(1.05);
  transform:scale(1.03);
}

@media (max-width:700px){
  html[data-design-system="halde"]{
    --page-gutter:18px;
    --section-space:72px;
    --mast-offset:59px;
  }

  html[data-design-system="halde"] .mastin{
    height:58px;
  }

  html[data-design-system="halde"] .mastnav{
    gap:12px!important;
    font-size:9px!important;
  }

  html[data-design-system="halde"] .cine-grid{
    grid-template-columns:1fr;
  }
}

@media (prefers-reduced-motion:reduce){
  html[data-design-system="halde"]{
    scroll-behavior:auto;
  }

  html[data-design-system="halde"] *,
  html[data-design-system="halde"] *::before,
  html[data-design-system="halde"] *::after{
    scroll-behavior:auto!important;
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }

  html[data-design-system="halde"] :where(.cine-reveal,.cine-mask){
    opacity:1;
    clip-path:none;
    transform:none;
  }
}

@media (prefers-contrast:more){
  html[data-design-system="halde"]{
    --theme-text-muted:var(--theme-text);
    --theme-text-faint:var(--theme-text);
    --theme-rule:var(--theme-text);
    --theme-rule-strong:var(--theme-text);
  }

  html[data-design-system="halde"] .stack::before{
    display:none;
  }
}