/* a8.css — aut0m8 UI tokens + core components.
   Canonical source of the "mini-demo look". Import this everywhere:
   marketing site widgets, demo mockups, and product front ends.
   Spec + usage rules: private\aut0m8-biz\UI-STYLE.md */

:root {
  /* surfaces, darkest to lightest */
  --a8-bg: #0b1018;        /* page background */
  --a8-bezel: #05080d;     /* device frames, deepest wells */
  --a8-panel: #101722;     /* cards, panels */
  --a8-panel2: #141d2b;    /* buttons, nested surfaces */
  --a8-hover: #1b2636;     /* hover state for panel2 surfaces */
  --a8-inset: #1c2534;     /* bar tracks, hairline dividers inside panels */

  /* lines + text */
  --a8-line: #3d4658;      /* the ONE border color; always 1px */
  --a8-text: #e8edf5;
  --a8-muted: #9aa7ba;

  /* accents — teal is "good/primary action", blue is "info/link",
     amber is "warning/pending", red is "problem". Never decorative. */
  --a8-teal: #7ee2b8;
  --a8-blue: #7cc4ff;
  --a8-amber: #e8d27a;
  --a8-red: #f0937f;

  /* accent surface tints (bg for banners/toasts/bubbles) */
  --a8-teal-bg: #14352a;  --a8-teal-line: #2c5c48;
  --a8-red-bg: #351a14;
  --a8-blue-bg: #182234;
  --a8-amber-bg: #33290f;

  /* shape */
  --a8-r-frame: 26px;      /* device frames */
  --a8-r-card: 16px;       /* cards, notifications */
  --a8-r-panel: 14px;      /* inner panels */
  --a8-r-btn: 12px;        /* buttons */
  --a8-r-pill: 999px;

  /* depth: exactly two shadows exist */
  --a8-shadow-frame: 0 24px 60px rgba(0,0,0,.6);
  --a8-shadow-float: 0 12px 30px rgba(0,0,0,.5);
  --a8-glow-info: 0 0 0 4px rgba(124,196,255,.18);

  --a8-font: "Segoe UI", system-ui, sans-serif;
}

/* motion: one entrance, used for everything that appears */
@keyframes a8-drop { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; } }
@keyframes a8-blink { 50% { opacity: .3; } }
.a8-appear { animation: a8-drop .35s ease; }

/* core components */
.a8-panel {
  background: var(--a8-panel); border: 1px solid var(--a8-line);
  border-radius: var(--a8-r-panel); padding: .85rem .95rem;
}
.a8-panel h3 {
  margin: 0 0 .7rem; font-size: .78rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--a8-muted);
}
.a8-card {
  background: var(--a8-panel); border: 1px solid var(--a8-line);
  border-radius: var(--a8-r-card); padding: 1rem;
}
.a8-btn {
  border: 1px solid var(--a8-line); background: var(--a8-panel2);
  color: var(--a8-text); border-radius: var(--a8-r-btn);
  padding: .6rem .9rem; font: 600 .9rem var(--a8-font); cursor: pointer;
}
.a8-btn.primary { border-color: var(--a8-teal); color: var(--a8-teal); }
.a8-btn:not(:disabled):hover { background: var(--a8-hover); }
.a8-btn:disabled { opacity: .35; cursor: default; }
.a8-pill {
  display: inline-block; font-size: .74rem; font-weight: 700;
  border-radius: var(--a8-r-pill); padding: .18rem .6rem;
  border: 1px solid var(--a8-amber); color: var(--a8-amber);
}
.a8-pill.ok { border-color: var(--a8-teal); color: var(--a8-teal); }
.a8-pill.bad { border-color: var(--a8-red); color: var(--a8-red); }
.a8-bar { height: 7px; border-radius: 4px; background: var(--a8-inset); overflow: hidden; }
.a8-bar i {
  display: block; height: 100%; background: var(--a8-blue);
  border-radius: 4px; transition: width .8s ease;
}
.a8-bar i.warn { background: var(--a8-amber); }
.a8-toast {
  background: var(--a8-teal-bg); border: 1px solid var(--a8-teal);
  color: var(--a8-teal); padding: .5rem .9rem; border-radius: var(--a8-r-pill);
  font: 700 .82rem var(--a8-font); white-space: nowrap;
}
.a8-banner {
  border-radius: var(--a8-r-btn); padding: .7rem .85rem; font-size: .88rem;
  display: flex; align-items: center; gap: .6rem; animation: a8-drop .4s ease;
}
.a8-banner.bad { background: var(--a8-red-bg); border: 1px solid var(--a8-red); }
.a8-banner.good { background: var(--a8-teal-bg); border: 1px solid var(--a8-teal); }
.a8-dot {
  width: 22px; height: 22px; border-radius: 50%; background: var(--a8-blue);
  color: var(--a8-bezel); font: 800 .8rem var(--a8-font);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; box-shadow: var(--a8-glow-info);
}
.a8-tip {
  max-width: 260px; background: var(--a8-blue-bg); border: 1px solid var(--a8-blue);
  border-radius: var(--a8-r-btn); padding: .6rem .75rem; font-size: .82rem;
  box-shadow: var(--a8-shadow-float);
}
.a8-frame {
  background: var(--a8-bezel); border: 1px solid var(--a8-line);
  border-radius: var(--a8-r-frame);
  box-shadow: var(--a8-shadow-frame), inset 0 0 0 6px var(--a8-bezel);
}
/* phone chrome: add to a position:relative .a8-frame so it reads as a handset.
   ::before = notch, ::after = home indicator. Keep interactive layers below z 8. */
.a8-phone {
  border-radius: 40px;
  box-shadow: var(--a8-shadow-frame), inset 0 0 0 9px var(--a8-bezel);
}
.a8-phone::before {
  content: ""; position: absolute; top: 9px; left: 50%; transform: translateX(-50%);
  width: 118px; height: 22px; border-radius: 0 0 14px 14px;
  background: var(--a8-bezel); z-index: 8; pointer-events: none;
}
.a8-phone::after {
  content: ""; position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%);
  width: 104px; height: 4px; border-radius: 999px;
  background: var(--a8-line); opacity: .7; z-index: 8; pointer-events: none;
}

/* self-hosted Nunito (variable, latin subset) for the warm theme */
@font-face {
  font-family: Nunito; font-style: normal; font-weight: 200 1000;
  font-display: swap; src: url(/fonts/nunito-latin.woff2) format("woff2");
}

/* ---- Warm shop: the shipped LIGHT theme (lab round-2 winner, picked 2026-07-12).
   Opt in per page with <html data-theme="warm">. Demos + marketing pages use this;
   dark :root above remains for product dashboards until they migrate. ---- */
[data-theme="warm"] {
  --a8-bg: #faf5ec;  --a8-bezel: #ffffff;  --a8-panel: #ffffff;  --a8-panel2: #f5eedd;
  --a8-hover: #eee5cf;  --a8-inset: #ece4d0;
  --a8-line: #dcd0b8;  --a8-text: #33291d;  --a8-muted: #8a7c66;
  --a8-teal: #2e7d4f;  --a8-blue: #3568b8;  --a8-amber: #a86e14;  --a8-red: #c24a2e;
  --a8-teal-bg: #e7f3ea;  --a8-teal-line: #9cc7ab;
  --a8-red-bg: #f9e6de;  --a8-blue-bg: #e8eefb;
  --a8-amber-bg: #fdf3df;
  --a8-shadow-frame: 0 18px 44px rgba(90,66,24,.16);
  --a8-shadow-float: 0 10px 26px rgba(90,66,24,.14);
  --a8-glow-info: 0 0 0 4px rgba(53,104,184,.12);
  --a8-font: Nunito, "Segoe UI", system-ui, sans-serif;
}
@keyframes a8-soft { from { opacity: 0; transform: translateY(12px) scale(.97); } to { opacity: 1; } }
[data-theme="warm"] .a8-appear, [data-theme="warm"] .a8-banner {
  animation: a8-soft .5s cubic-bezier(.25,1.35,.4,1);
}
[data-theme="warm"] .a8-btn { border-radius: 14px; font-weight: 800; }
[data-theme="warm"] .a8-btn.primary {
  background: var(--a8-teal); border-color: var(--a8-teal); color: #fff;
}
[data-theme="warm"] .a8-btn.primary:not(:disabled):hover { background: #256a42; }
[data-theme="warm"] .a8-dot { color: #fff; }
/* white phones need a dark bezel or the notch disappears on a light screen */
[data-theme="warm"] .a8-phone {
  box-shadow: var(--a8-shadow-frame), inset 0 0 0 9px #33291d;
}
[data-theme="warm"] .a8-phone::before { background: #33291d; }
[data-theme="warm"] .a8-phone::after { background: #33291d; opacity: .3; }

/* accessibility: motion off means off */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}