/* Atlas shared UI contract — shell source of truth, 2026-09-22.
   Copy this file byte-for-byte into the game only after its executor accepts the handoff.
   Screen composition stays local; this file owns tokens and tactile primitives. */
:root{
  --atlas-ink:#143f42;
  --atlas-night:#102f35;
  --atlas-teal:#246f69;
  --atlas-teal-deep:#164b4b;
  --atlas-paper:#fff8e8;
  --atlas-paper-soft:#eedab3;
  --atlas-amber:#efbd61;
  --atlas-focus:#ffd681;
  --atlas-line-light:rgba(255,255,255,.72);
  --atlas-line-dark:rgba(46,74,66,.18);
  --atlas-shadow-soft:0 10px 25px rgba(5,31,33,.16);
  --atlas-shadow-deep:0 22px 58px rgba(4,25,27,.30);
  --atlas-shadow-pressed:0 5px 12px rgba(4,25,27,.18);
  --atlas-ease:cubic-bezier(.2,.8,.2,1);
  --atlas-duration:.16s;
  --atlas-touch:48px;
  --atlas-icon-sm:20px;
  --atlas-icon-md:24px;
  --atlas-icon-lg:32px;
  --atlas-space-1:4px;
  --atlas-space-2:8px;
  --atlas-space-3:12px;
  --atlas-space-4:16px;
  --atlas-space-5:24px;
  --atlas-radius-control:18px;
  --atlas-radius-card:28px;
  --atlas-text-scale:1;
  --atlas-type-caption:calc(.75rem * var(--atlas-text-scale));
  --atlas-type-body:calc(1rem * var(--atlas-text-scale));
  --atlas-type-action:calc(1rem * var(--atlas-text-scale));
  --atlas-type-title:clamp(calc(1.75rem * var(--atlas-text-scale)),7vw,calc(2.55rem * var(--atlas-text-scale)));
  --atlas-glass-dark:rgba(16,58,61,.78);
  --atlas-glass-light:rgba(255,248,232,.82);
}

*,*::before,*::after{box-sizing:border-box}
:where(button,summary,input,select,textarea){font:inherit}
:where(button){touch-action:manipulation;-webkit-tap-highlight-color:transparent}
:where(button:not(:disabled),summary){cursor:pointer}
:where(button){min-block-size:calc(var(--atlas-touch) + 1px);min-height:calc(var(--atlas-touch) + 1px)!important}
:where(svg.atlas-icon,.atlas-icon svg,.arrow-icon){display:block;inline-size:var(--atlas-icon-md);block-size:var(--atlas-icon-md);fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}

:where(button,input,summary,select,textarea):focus-visible{
  outline:3px solid var(--atlas-focus);
  outline-offset:3px;
}
:where(button:not(:disabled),.atlas-pressable:not([aria-disabled="true"])){
  transition:transform var(--atlas-duration) var(--atlas-ease),filter var(--atlas-duration) var(--atlas-ease),box-shadow var(--atlas-duration) var(--atlas-ease),border-color var(--atlas-duration) var(--atlas-ease),background-color var(--atlas-duration) var(--atlas-ease);
}
@media (hover:hover){:where(button:not(:disabled),.atlas-pressable:not([aria-disabled="true"]):hover){filter:brightness(1.035)}}
:where(button:not(:disabled):active,button.is-pressed,.atlas-pressable.is-pressed){transform:translateY(2px) scale(.985);filter:brightness(.94);box-shadow:var(--atlas-shadow-pressed)}
:where(button:disabled,[aria-disabled="true"]){cursor:not-allowed;filter:saturate(.45);opacity:.62;box-shadow:none!important}

.atlas-glass{
  border:1px solid var(--atlas-line-light);
  background:var(--atlas-glass-dark);
  box-shadow:inset 0 1px rgba(255,255,255,.35),var(--atlas-shadow-soft);
  -webkit-backdrop-filter:blur(16px) saturate(1.12);
  backdrop-filter:blur(16px) saturate(1.12);
}
.atlas-glass--light{color:var(--atlas-ink);background:var(--atlas-glass-light)}
.atlas-icon-button,.atlas-arrow-button{
  display:inline-grid;
  place-items:center;
  inline-size:var(--atlas-touch);
  min-inline-size:var(--atlas-touch);
  block-size:var(--atlas-touch);
  min-block-size:var(--atlas-touch);
  padding:0;
  border-radius:var(--atlas-radius-control);
}
.atlas-arrow-button .arrow-icon{inline-size:var(--atlas-icon-lg);block-size:var(--atlas-icon-lg)}
.atlas-selected,[aria-current="page"]{border-color:var(--atlas-focus);box-shadow:0 0 0 2px rgba(255,214,129,.42),var(--atlas-shadow-soft)}

.atlas-switch{
  position:relative;
  inline-size:52px;
  block-size:30px;
  border:1px solid rgba(46,74,66,.25);
  border-radius:999px;
  background:#b7c5bd;
  box-shadow:inset 0 2px 5px rgba(4,25,27,.18);
  flex:none;
}
.atlas-switch::after{
  content:"";
  position:absolute;
  inset-block-start:4px;
  inset-inline-start:4px;
  inline-size:20px;
  block-size:20px;
  border-radius:50%;
  background:var(--atlas-paper);
  box-shadow:0 2px 5px rgba(4,25,27,.28),inset 0 1px rgba(255,255,255,.8);
  transition:transform var(--atlas-duration) var(--atlas-ease);
}
[aria-checked="true"].atlas-switch{background:var(--atlas-teal)}
[aria-checked="true"].atlas-switch::after{transform:translateX(22px)}

@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  .atlas-glass{background:#174b4d}
  .atlas-glass--light{background:#f0e5c9}
}

@media (prefers-reduced-motion:reduce){
  :where(*,button,input,summary){scroll-behavior:auto!important;transition-duration:.001ms!important;animation-duration:.001ms!important;animation-iteration-count:1!important}
  :where(button:not(:disabled):active,button.is-pressed,.atlas-pressable.is-pressed){transform:none}
}
.reduced-motion :where(*,button,input,summary){scroll-behavior:auto!important;transition-duration:.001ms!important;animation-duration:.001ms!important;animation-iteration-count:1!important}
.reduced-motion :where(button:not(:disabled):active,button.is-pressed,.atlas-pressable.is-pressed){transform:none}