/* =========================================================
   AKU // DREAM_CONSOLE — Terminal Developer theme override.
   Sits on top of tokens.css. Pushes the system toward a
   Share Tech Mono kid-coder console with HUD-cyan chrome.
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap');

:root {
  /* Re-point UI/body to Share Tech Mono — the Terminal voice */
  --font-terminal: 'Share Tech Mono', 'JetBrains Mono', ui-monospace, monospace;
  --font-display-heavy: 'Nostromo', 'Arial Black', sans-serif;

  /* Console color anchors */
  --console-bg: #050B1C;            /* deeper than night, true console */
  --console-panel: #0A1632;          /* card surface */
  --console-line: #0F2348;           /* divider */
  --console-edge: rgba(159,227,255,.22);
  --console-edge-hot: rgba(159,227,255,.55);
  --console-glow: #3FB4FF;
  --console-cyan: #9FE3FF;
  --console-text: #C9DEFF;
  --console-text-dim: #6E89B8;

  /* Signal pops — the "kid" layer */
  --signal-yellow: #FFD23F;
  --signal-green:  #03E9A4;
  --signal-red:    #E13D35;
  --signal-pink:   #F5D9E1;
  --signal-violet: #B69CFF;

  /* Decorative pattern + kid-button shadow — surface-overridable */
  --pattern-bg: url(assets/gravity-off-white.svg);
  --pattern-opacity: 0.07;
  --kid-shadow: #141414;
}

/* =========================================================
   SURFACE INVERSIONS
   Re-point the console tokens so the same components
   render on warm-paper white OR true-black ink.
   ========================================================= */

/* ---------- PAPER · warm white, ibra-blue HUD ---------- */
.surface-paper {
  --console-bg:       #FBF8F2;
  --console-panel:    #FFFFFF;
  --console-line:     rgba(20,20,20,.10);
  --console-edge:     rgba(20,20,20,.22);
  --console-edge-hot: rgba(19,85,185,.55);
  --console-glow:     #1355B9;
  --console-cyan:     #1355B9;
  --console-text:     #141414;
  --console-text-dim: #6B6B6B;

  --pattern-bg: url(assets/gravity-off-black.svg);
  --pattern-opacity: 0.22;
  --kid-shadow: #141414;

  color: var(--console-text);
  background: var(--console-bg);
}

/* on paper, the kid button keeps its black drop-shadow */
.surface-paper .btn-bracket.kid { box-shadow: 0 6px 0 0 var(--kid-shadow); }

/* ---------- INK · true black, solar-yellow HUD ---------- */
.surface-ink {
  --console-bg:       #0A0A0A;
  --console-panel:    #141414;
  --console-line:     rgba(255,255,255,.06);
  --console-edge:     rgba(255,210,63,.28);
  --console-edge-hot: rgba(255,210,63,.55);
  --console-glow:     #FFD23F;
  --console-cyan:     #FFD23F;
  --console-text:     #F5F5F5;
  --console-text-dim: #888888;

  --pattern-bg: url(assets/gravity-off-white.svg);
  --pattern-opacity: 0.22;
  --kid-shadow: #FFD23F;

  color: var(--console-text);
  background: var(--console-bg);
}

/* on ink, the kid button's drop-shadow becomes a yellow stencil so it's visible */
.surface-ink .btn-bracket.kid { box-shadow: 0 6px 0 0 var(--kid-shadow); }
.surface-ink .btn-bracket.kid { border-color: #0A0A0A; }

/* ---------- BASE RESET ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-terminal);
  color: var(--console-text);
  background: var(--console-bg);
}

/* ---------- LOCAL TEXT PRIMITIVES ---------- */
.kbd {
  font-family: var(--font-terminal);
  letter-spacing: .02em;
  text-transform: uppercase;
}
.kbd-low { text-transform: none; }

.eyebrow-hand {
  font-family: var(--font-hand);
  color: var(--signal-yellow);
  line-height: 1;
}

.heavy {
  font-family: var(--font-display-heavy);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0;
}

/* ---------- HUD chrome (terminal flavor) ---------- */
.hud-line {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--font-terminal);
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--console-cyan);
}
.hud-line::before, .hud-line::after {
  content: ''; flex: 1; height: 1px;
  background: var(--console-edge);
}
.hud-line.left::before { display: none; }
.hud-line.right::after { display: none; }

.hud-rule-h { height: 1px; background: var(--console-edge); width: 100%; }
.hud-rule-v { width: 1px; background: var(--console-edge); height: 100%; }

.hud-tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 8px 3px;
  border: 1px solid var(--console-cyan);
  font-family: var(--font-terminal);
  font-size: 10px; letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--console-cyan);
  background: transparent;
}
.hud-tag .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--signal-green);
  box-shadow: 0 0 6px var(--signal-green);
}
.hud-tag.warn .dot { background: var(--signal-yellow); box-shadow: 0 0 6px var(--signal-yellow); }
.hud-tag.alert .dot { background: var(--signal-red); box-shadow: 0 0 6px var(--signal-red); }
.hud-tag.muted { color: var(--console-text-dim); border-color: var(--console-edge); }

/* ---------- corner crops (the "data chassis" look) ---------- */
.chassis {
  position: relative;
  background: var(--console-panel);
  border: 1px solid var(--console-edge);
}
.chassis::before, .chassis::after,
.chassis > .crop-tl, .chassis > .crop-tr,
.chassis > .crop-bl, .chassis > .crop-br {
  position: absolute; width: 10px; height: 10px; pointer-events: none;
  border-color: var(--console-cyan); border-style: solid; border-width: 0;
}
.chassis::before { content:''; top:-1px; left:-1px;  border-top-width:1px;    border-left-width:1px;    width:14px; height:14px; }
.chassis::after  { content:''; top:-1px; right:-1px; border-top-width:1px;    border-right-width:1px;   width:14px; height:14px; }
.chassis > .crop-bl { bottom:-1px; left:-1px;  border-bottom-width:1px; border-left-width:1px;  width:14px; height:14px; }
.chassis > .crop-br { bottom:-1px; right:-1px; border-bottom-width:1px; border-right-width:1px; width:14px; height:14px; }

/* ---------- bracket button (the signature CTA) ---------- */
.btn-bracket {
  --bg: transparent;
  --fg: var(--console-cyan);
  --edge: var(--console-cyan);
  display: inline-flex; align-items: center; gap: 0;
  padding: 14px 18px;
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--edge);
  font-family: var(--font-terminal);
  font-size: 16px; letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out-soft),
              color var(--dur-fast) var(--ease-out-soft),
              transform var(--dur-fast) var(--ease-out-soft),
              box-shadow var(--dur-med) var(--ease-out-soft);
  user-select: none;
  position: relative;
  white-space: nowrap;
}
.btn-bracket::before { content: '[  '; opacity: .6; }
.btn-bracket::after  { content: '  ]'; opacity: .6; }
.btn-bracket:hover {
  --bg: var(--console-cyan);
  --fg: var(--console-bg);
  box-shadow: 0 0 0 3px rgba(159,227,255,.18);
}
.btn-bracket:hover::before, .btn-bracket:hover::after { opacity: 1; }
.btn-bracket:active { transform: translateY(1px); }
.btn-bracket.solid {
  --bg: var(--console-cyan); --fg: var(--console-bg); --edge: var(--console-cyan);
}
.btn-bracket.solid:hover { --bg: var(--console-glow); --edge: var(--console-glow); }
.btn-bracket.ghost { --edge: var(--console-edge); --fg: var(--console-text); }
.btn-bracket.ghost:hover { --edge: var(--console-cyan); --fg: var(--console-cyan); --bg: transparent; box-shadow: 0 0 0 3px rgba(159,227,255,.12); }
.btn-bracket.kid {
  --bg: var(--signal-yellow); --fg: #141414; --edge: #141414;
  box-shadow: 0 6px 0 0 #141414;
}
.btn-bracket.kid:hover { transform: translate(0, -2px); box-shadow: 0 8px 0 0 #141414; }
.btn-bracket.kid:active { transform: translate(0, 4px); box-shadow: 0 2px 0 0 #141414; }
.btn-bracket.danger { --edge: var(--signal-red); --fg: var(--signal-red); }
.btn-bracket.danger:hover { --bg: var(--signal-red); --fg: #fff; --edge: var(--signal-red); }
.btn-bracket[disabled],
.btn-bracket.disabled {
  --edge: var(--console-edge); --fg: var(--console-text-dim);
  cursor: not-allowed; pointer-events: none; opacity: .65;
}

/* small variant for in-card */
.btn-bracket.sm { padding: 8px 12px; font-size: 12px; }
.btn-bracket.lg { padding: 18px 24px; font-size: 18px; }

/* ---------- input fields ---------- */
.field {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  background: rgba(159,227,255,.04);
  border: 1px solid var(--console-edge);
  color: var(--console-text);
  font-family: var(--font-terminal);
  font-size: 14px;
}
.field input,
.field textarea,
input.field,
textarea.field {
  width: 100%; background: none; border: 0; color: inherit;
  font: inherit; outline: 0;
}
.field input::placeholder { color: var(--console-text-dim); }
.field:focus-within { border-color: var(--console-cyan); box-shadow: 0 0 0 2px rgba(159,227,255,.18); }
.field .prefix { color: var(--signal-green); }

/* ---------- chips / tags inside cards ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px;
  font-family: var(--font-terminal);
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--console-cyan);
  border: 1px solid var(--console-edge);
}
.chip.live { color: var(--signal-green); border-color: var(--signal-green); }
.chip.locked { color: var(--console-text-dim); }
.chip.new { color: var(--signal-yellow); border-color: var(--signal-yellow); }

/* ---------- scanline / barcode generators ---------- */
.bar-tally {
  height: 10px;
  background: repeating-linear-gradient(90deg,
    var(--console-cyan) 0 1px, transparent 1px 4px,
    var(--console-cyan) 4px 6px, transparent 6px 10px);
  opacity: .85;
}
.bar-barcode {
  height: 38px;
  background: repeating-linear-gradient(90deg,
    var(--console-cyan) 0 2px, transparent 2px 4px,
    var(--console-cyan) 4px 5px, transparent 5px 9px,
    var(--console-cyan) 9px 12px, transparent 12px 14px,
    var(--console-cyan) 14px 15px, transparent 15px 19px);
}
.bar-slant {
  height: 14px;
  background: repeating-linear-gradient(-58deg,
    var(--console-cyan) 0 2px, transparent 2px 8px);
}
.bar-load {
  height: 18px;
  background: repeating-linear-gradient(90deg,
    var(--console-cyan) 0 8px, transparent 8px 12px);
}

/* ---------- focus ring for prototype interactivity ---------- */
:focus-visible { outline: 2px solid var(--console-cyan); outline-offset: 2px; }

/* ---------- scrollbar tweaks for prototype panels ---------- */
.scroll-thin::-webkit-scrollbar { width: 6px; height: 6px; }
.scroll-thin::-webkit-scrollbar-thumb { background: var(--console-edge); }
.scroll-thin::-webkit-scrollbar-track { background: transparent; }