/* Direction: QRCircuit — cool paper-grey SaaS workspace, deep indigo accent, geometric display face */
/* Completed by the platform from the short form: both modes, every
   palette token, each text-on-ground pair at its floor. To restyle, write the
   short form again (the decisions in one :root) and it is completed again. */

:root {
  --canvas: #f4f5fa;
  --surface: #ffffff;
  --surface-2: #e8e9ef;
  --border: #dde1ee;
  --border-strong: #aeaeb7;
  --ink: #141a2e;
  --muted: #566077;
  --accent: #4338ca;
  --accent-hover: #3930ac;
  --accent-ink: #ffffff;
  --accent-text: #3730a3;
  --accent-strong: #4338ca;
  --accent-soft: #e7e8fb;
  --accent-border: #a4a0e4;
  --success: #15803d;
  --success-ink: #ffffff;
  --success-soft: #d9e7e3;
  --success-strong: #116d34;
  --warning: #b45309;
  --warning-ink: #ffffff;
  --warning-soft: #ece2dd;
  --warning-strong: #a64c08;
  --danger: #b91c1c;
  --danger-ink: #ffffff;
  --danger-soft: #eddbdf;
  --danger-strong: #b91c1c;
  --chart-1: #4338ca;
  --chart-2: #b7269d;
  --chart-3: #892500;
  --chart-4: #7b6a14;
  --chart-5: #0f5c38;
  --chart-6: #0d7a91;

  --x-band: #1b1f4b;
  --x-on-band: #f1f2ff;
  --font-display: "Plus Jakarta Sans", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --display-weight: 800;
  --display-tracking: -0.02em;
  --radius-card: 16px;
  --radius-btn: 10px;
  --radius-input: 10px;
  --font-sans: "Inter", system-ui, sans-serif;
  --eyebrow-tracking: 0.08em;
}

html[data-theme="dark"] {
  --canvas: #070614;
  --surface: #201f2c;
  --surface-2: #131220;
  --border: #2a2935;
  --border-strong: #51515b;
  --ink: #f4f5fa;
  --muted: #95959e;
  --accent: #4338ca;
  --accent-hover: #5f56d2;
  --accent-ink: #ffffff;
  --accent-text: #847bdc;
  --accent-strong: #847bdc;
  --accent-soft: #14113c;
  --accent-border: #221c66;
  --success: #15803d;
  --success-ink: #ffffff;
  --success-soft: #0a211d;
  --success-strong: #499c68;
  --warning: #b45309;
  --warning-ink: #ffffff;
  --warning-soft: #2d1712;
  --warning-strong: #c57a40;
  --danger: #b91c1c;
  --danger-ink: #ffffff;
  --danger-soft: #2e0b16;
  --danger-strong: #d16969;
  --chart-1: #5b5aed;
  --chart-2: #da4bbc;
  --chart-3: #dc4306;
  --chart-4: #9d881e;
  --chart-5: #04995d;
  --chart-6: #149bb7;
}

/* QRCircuit — designer specifics. Tokens only; no colour literals. */
.seg { display: flex; gap: 2px; padding: 2px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border); }
.seg button { display: inline-flex; flex: 1; min-width: 0; align-items: center; justify-content: center; gap: 0.35rem; padding: 0.4rem 0.5rem; font-size: 0.78rem; font-weight: 500; border-radius: 8px; color: var(--muted); transition: background 0.15s, color 0.15s; }
.seg button:hover { color: var(--ink); }
.seg button[aria-pressed="true"] { @apply bg-accent text-accent-ink; }
.seg button:focus-visible, .etab:focus-visible, .chipbtn:focus-visible, .tplitem:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.etab { display: flex; flex-direction: column; align-items: center; gap: 0.2rem; padding: 0.5rem 0.15rem; border-radius: 10px; font-size: 0.68rem; font-weight: 500; color: var(--muted); transition: background 0.15s, color 0.15s; }
.etab:hover { background: var(--surface-2); color: var(--ink); }
.etab[aria-selected="true"] { @apply bg-accent-soft text-accent-text; }

.chipbtn { display: inline-flex; flex: none; align-items: center; gap: 0.4rem; padding: 0.5rem 0.8rem; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); font-size: 0.85rem; font-weight: 500; color: var(--ink); transition: background 0.15s, border-color 0.15s, transform 0.1s; }
.chipbtn:hover { border-color: var(--accent); }
.chipbtn:active { transform: scale(0.97); }
.chipbtn[aria-pressed="true"] { @apply bg-accent-soft text-accent-text; border-color: var(--accent); }

.tplitem > span:first-child { border: 2px solid transparent; transition: border-color 0.15s, transform 0.15s; }
.tplitem:hover > span:first-child { transform: translateY(-2px); border-color: var(--border); }
.tplitem[aria-selected="true"] > span:first-child { border-color: var(--accent); }

.tcard { transition: transform 0.18s, border-color 0.18s, box-shadow 0.18s; }
.tcard:hover { transform: translateY(-2px); box-shadow: 0 10px 28px -16px var(--ink); }

img:not([src]) { visibility: hidden; }
.stage-svg { display: block; max-width: none; flex: none; }
#stage-wrap.phone { min-width: 0 !important; padding: 28px 14px; border: 10px solid var(--ink); border-radius: 38px; background: var(--canvas); }
input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
input[type="color"]::-webkit-color-swatch { border: none; border-radius: 4px; }
input[type="range"] { height: 1.25rem; }

html.reduced-motion .tcard, html.reduced-motion .tplitem > span:first-child, html.reduced-motion .chipbtn { transition: none; transform: none; }