/*
 * The console skin in CBA black and gold.
 *
 * ciba.css draws a light developer console in Raidiam mint. That was the last surface on the
 * deliverable still in a different palette: a reader moving from the microsite or the estate view to
 * the signals console crossed a colour boundary that meant nothing.
 *
 * This is a token layer, not a second stylesheet. ciba.css and tokens.css are almost entirely
 * token driven, so remapping the tokens under `.theme-console` moves the whole console at once and
 * keeps one definition of the palette, in cba-brand.css. Only the rules that hardcode a light
 * literal (#fff grounds, pastel pill backgrounds) are restated below, and each is restated once.
 *
 * ONE RULE GOVERNS COLOUR, the same rule cba-brand.css carries: the brand colour never carries
 * state. Gold is identity and structure, so it takes the accent: headings, card icons, focus rings,
 * the primary action. Mint stays where something actually resolved, which on this page means a
 * transmitter that answered, a stream that is live and an event that arrived and verified. Amber is
 * in progress, rust is refused. Nothing here can be read as further along than it is because it was
 * painted in the house colour.
 */

.theme-console {
  /* Accent: gold, because it marks structure. */
  --brand-mint: var(--gold);
  --brand-mint-bright: #ffd54d;
  --brand-mint-deep: var(--gold);
  --brand-mint-soft: var(--gold-soft);

  /* The ink family becomes the true graphite grounds. */
  --brand-ink: var(--deep);
  --brand-ink-2: var(--raise);
  --brand-ink-3: #101a21;
  --brand-ink-line: var(--line-strong);

  /* The neutral ramp inverts: low numbers are grounds, high numbers are text. */
  --neutral-0: var(--ink);
  --neutral-50: var(--deep);
  --neutral-100: var(--raise);
  --neutral-200: rgba(150, 180, 190, 0.16);
  --neutral-300: rgba(150, 180, 190, 0.3);
  --neutral-400: var(--faint);
  --neutral-500: var(--dim);
  --neutral-600: var(--dim);
  --neutral-700: var(--paper);
  --neutral-800: var(--paper);
  --neutral-900: var(--paper);

  --bg-canvas: var(--ink);
  --bg-surface: var(--deep);
  --bg-raised: var(--raise);
  --bg-muted: var(--raise);

  --fg1: var(--paper);
  --fg2: var(--dim);
  --fg3: var(--faint);
  --fg-mute: var(--faint);
  --fg-link: var(--gold);

  --border-subtle: var(--line);
  --border-strong: var(--line-strong);
  --border-focus: var(--gold);

  /* State colours, as translucent tints rather than pastels. */
  --success: var(--mint);
  --success-soft: rgba(61, 220, 151, 0.14);
  --warning: var(--amber);
  --warning-soft: rgba(255, 209, 102, 0.14);
  --danger: var(--rust);
  --danger-soft: rgba(255, 93, 108, 0.14);
  --info: var(--steel);
  --info-soft: rgba(121, 166, 210, 0.14);

  --accent: var(--gold);
  --accent-bright: #ffd54d;
  --accent-deep: #e0ab00;
  --accent-soft: var(--gold-soft);
  --on-accent: #10130a;
  --brand-surface: var(--deep);
  --brand-surface-2: var(--raise);
  --canvas: var(--ink);
  --header-fg: var(--paper);

  /* Elevation on a dark ground is a darker shadow, not a lighter one. */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.45);
  --shadow-md: 0 8px 22px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 22px 60px rgba(0, 0, 0, 0.6);
  --shadow-glow: 0 0 0 4px rgba(255, 196, 0, 0.22);

  color-scheme: dark;
}

/* ── Rules that hardcode a light literal in ciba.css ────────────────────── */

.theme-console .appbar { background: var(--deep); color: var(--paper); }
.theme-console .btn-secondary:hover { background: var(--raise); border-color: var(--gold); color: var(--paper); }
.theme-console .btn-approve { color: #10130a; }
.theme-console .btn-deny { background: transparent; color: var(--rust); border-color: rgba(255, 93, 108, 0.4); }
.theme-console .input,
.theme-console .select,
.theme-console .textarea { background: var(--raise); color: var(--paper); }
.theme-console .input::placeholder,
.theme-console .textarea::placeholder { color: var(--faint); }
.theme-console .input:focus,
.theme-console .select:focus,
.theme-console .textarea:focus { border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft); }
.theme-console .check { background: var(--raise); }
.theme-console .check.on { border-color: var(--gold); background: var(--gold-soft); }
.theme-console .seg-card { background: var(--raise); }
.theme-console .seg-card.sel { background: var(--raise); border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft); }
.theme-console .seg-card.sel .seg-radio { border-color: var(--gold); }
.theme-console .seg-card.sel .seg-radio::after { background: var(--gold); }

/* Pills. Mint means it resolved, amber means in progress, rust means refused, grey means not yet. */
.theme-console .pill.green { color: var(--mint); }
.theme-console .pill.mint { background: rgba(61, 220, 151, 0.14); color: var(--mint); }
.theme-console .pill.mint .dot { background: var(--mint); }
.theme-console .pill.red { color: var(--rust); }
.theme-console .pill.amber { color: var(--amber); }
.theme-console .pill.info { color: var(--steel); }
.theme-console .pill.neutral { color: var(--dim); }
.theme-console .live.on { color: var(--mint); }
.theme-console .live.off { color: var(--amber); }
.theme-console .banner.green { color: var(--mint); border-color: rgba(61, 220, 151, 0.32); }
.theme-console .banner.mint { background: var(--gold-soft); color: var(--gold); border-color: rgba(255, 196, 0, 0.32); }
.theme-console .banner.info { color: var(--steel); border-color: rgba(121, 166, 210, 0.32); }
.theme-console .banner.amber { color: var(--amber); border-color: rgba(255, 209, 102, 0.32); }
.theme-console .scope.payment { background: var(--gold-soft); border-color: rgba(255, 196, 0, 0.3); color: var(--gold); }

/* The JSON viewer sits one step below the card it is inside, so a payload reads as a quotation. */
.theme-console .jsonview { background: #030608; color: var(--paper); border: 1px solid var(--line); }
.theme-console .jsonview .jk { color: var(--gold); }
.theme-console .jsonview .js { color: var(--mint); }
.theme-console .jsonview .jn { color: var(--steel); }
.theme-console .jsonview .jb { color: var(--rust); }

.theme-console a { color: var(--gold); }
.theme-console .logo-c { background: var(--gold) !important; color: #10130a !important; }
.theme-console ::selection { background: rgba(255, 196, 0, 0.28); }