/* ═══════════════════════════════════════════════════════
   RHODES ISLAND ADMIN — GLOBAL THEME
   Neutral dark surfaces (no hue tint on any gray) with cyan as the
   single accent hue. Angular "terminal ops" language: cut corners,
   hairline borders, uppercase tracked labels.
   ═══════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Bender:wght@400;700&family=Jost:ital,wght@0,300;0,400;0,600;0,700;1,300&family=Open+Sans:wght@600;700;800&display=swap');

:root {
  /* Primary accent — cyan, the only hue in the palette */
  --accent:       #36b5d8;
  --accent-rgb:   54, 181, 216;
  --accent-hi:    #82e2fb;
  --accent-hi-rgb:130, 226, 251;
  --accent-lo:    #1c7f99;
  --accent-lo-rgb:28, 127, 153;

  /* Secondary accent — sparingly, for notifications / important callouts */
  --orange:     #ff6801;
  --orange-rgb: 255, 104, 1;

  /* Backgrounds — strictly neutral (R=G=B), no warm/cool tint anywhere */
  --bg-rgb:     11, 11, 11;
  --bg:         #0b0b0b;
  --bg-panel:   #111111;
  --bg-panel-2: #171717;
  --bg-card:    #141414;
  --bg-card-2:  #1c1c1c;
  --dim:        rgba(11, 11, 11, 0.94);

  /* Borders & surfaces derived from accent */
  --border-rgb: var(--accent-rgb);
  --border:     rgba(var(--accent-rgb), 0.16);
  --line:       rgba(255, 255, 255, 0.07);
  --surface-lo: rgba(var(--accent-rgb), 0.04);
  --surface-md: rgba(var(--accent-rgb), 0.09);
  --surface-hi: rgba(var(--accent-rgb), 0.16);

  /* Text — neutral gray scale, cyan lives only in --accent* */
  --fg-rgb:     235, 235, 235;
  --fg:         #ececec;
  --text:       rgba(220, 220, 220, 0.72);
  --muted:      rgba(200, 200, 200, 0.4);

  /* Semantic status colours */
  --gain:       #5dcf80;
  --gain-rgb:   93, 207, 128;
  --loss:       #de5f5c;
  --loss-rgb:   222, 95, 92;
  --warn:       #e0b440;
  --warn-rgb:   224, 180, 64;

  /* Motion */
  --ease:      cubic-bezier(.22, .85, .32, 1);
  --ease-out:  cubic-bezier(.16, 1, .3, 1);
  --ease-punch: cubic-bezier(.36, .07, .19, .97);
  --dur-fast:  .12s;
  --dur:       .18s;
  --dur-slow:  .32s;
  --dur-slower: .6s;

  /* Shared geometry */
  --notch: 10px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Jost', 'Segoe UI', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; transition: color var(--dur) var(--ease); }
a:hover { color: var(--accent-hi); }

::selection { background: rgba(var(--accent-rgb), 0.32); color: #fff; }

:focus-visible {
  outline: 2px solid rgba(var(--accent-rgb), 0.65);
  outline-offset: 2px;
  border-radius: 1px;
}

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(var(--fg-rgb), 0.12); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(var(--fg-rgb), 0.22); }

/* ── Shared keyframes ─────────────────────────────────────────────────── */
@keyframes rise-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes pulse-soft {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}
@keyframes accent-sweep {
  from { background-position: -200% 0; }
  to   { background-position: 200% 0; }
}
/* "Alive" indicator for active/alert surfaces. --breathe-rgb defaults to the
   accent color; set it locally (e.g. to --loss-rgb) to recolor per use. */
@keyframes breathe {
  0%, 100% { background-color: rgba(var(--breathe-rgb, var(--accent-rgb)), 0.06); }
  50%      { background-color: rgba(var(--breathe-rgb, var(--accent-rgb)), 0.16); }
}
/* Irregular warning-light flicker, distinct from pulse-soft's smooth fade. */
@keyframes flicker {
  0%, 100% { opacity: 1; }
  10%, 20%, 40% { opacity: .4; }
  11%, 21%, 41% { opacity: 1; }
}
/* Quick "that didn't work" jitter for failed actions/validation. */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-4px); }
  40%      { transform: translateX(4px); }
  60%      { transform: translateX(-3px); }
  80%      { transform: translateX(3px); }
}
@keyframes slide-in-left {
  from { opacity: 0; transform: translateX(-16px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ── Tacticool entrance system ─────────────────────────────────────────
   HUD-style reveals for module/panel entrances: hard wipes and snapping
   corners instead of soft fades, in keeping with the "terminal ops" motif.
   Uses --ease-punch (a sharp overshoot-less snap) rather than --ease-out. */

/* Module switch: a "focus-lock" settle -- no wipe, no flashing. Panel starts
   slightly scaled down and defocused (blur), then snaps to sharp/full-size
   in one smooth motion. Complexity comes from what's layered ALONGSIDE this
   (see .mod::before/::after below: two reticle-style corner brackets that
   fly in and snap onto the panel's own corners), not from the panel's own
   keyframe doing multiple back-and-forth steps. */
@keyframes tac-reveal {
  0%   { opacity: 0; transform: scale(.965) translateY(8px); filter: blur(5px); }
  100% { opacity: 1; transform: scale(1) translateY(0); filter: blur(0); }
}
/* Reticle corner bracket flying in from further out and snapping onto one
   of the panel's own corners -- single smooth motion, no repeats/flicker. */
@keyframes tac-bracket-in {
  0%   { opacity: 0; transform: translate(var(--bracket-from-x, 14px), var(--bracket-from-y, -14px)) scale(1.4); }
  65%  { opacity: 1; }
  100% { opacity: .9; transform: translate(0, 0) scale(1); }
}
/* Staggered card/panel "power-on": snaps up into place with a brightness
   pop, rather than a plain fade -- reads as HUD elements initializing. */
@keyframes tac-card-in {
  0%   { opacity: 0; transform: translateY(14px) scaleY(.9); filter: brightness(2.2); }
  55%  { opacity: 1; filter: brightness(1.3); }
  100% { opacity: 1; transform: translateY(0) scaleY(1); filter: brightness(1); }
}
/* Accent bar "drawing" itself in alongside a card's power-on cascade. */
@keyframes tac-bar-grow {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}
/* Corner HUD brackets snapping inward into position on initial load. */
@keyframes hud-corner-in {
  0%   { opacity: 0; transform: scale(1.6); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: scale(1); }
}