/* ============================================================
   CaesariumX — App Skin
   ------------------------------------------------------------
   The six original tools each shipped with their own palette:
   teal, purple, cyan, neon-green, pure #00ff00. Individually
   fine, together they looked like six unrelated products.

   Every one of them declares its colours as custom properties
   and then uses var() throughout, so this file re-points those
   variables at the brand palette without touching a single
   layout rule. Structure, spacing and behaviour are untouched —
   only the values behind the variables change.

   Loaded AFTER each app's inline <style>, and selectors are
   written as html[data-cx-app=…] (0,1,1) so they outrank the
   app's own :root (0,1,0) regardless of order.

   Rule of thumb for each mapping: whichever accent the app
   leaned on most becomes crimson, and the rest are re-pointed at
   brand gold / green / blue so data-heavy views keep the
   distinguishable colours they need.
   ============================================================ */

:root {
    --cx-bg:          #020203;
    --cx-bg-soft:     #07080b;
    --cx-bg-card:     #0a0b10;
    --cx-bg-hover:    #12141a;

    --cx-red:         #ff315f;
    --cx-red-deep:    #dc143c;
    --cx-red-dark:    #8b0020;
    --cx-orange:      #ff8c3c;
    --cx-gold:        #ffd166;
    --cx-green:       #48f7a7;
    --cx-blue:        #5d7cff;
    --cx-cyan:        #6de8ff;
    --cx-purple:      #a98cff;

    --cx-text:        #f7f8fb;
    --cx-text-soft:   #c8ccd7;
    --cx-text-muted:  #8d93a4;
    --cx-text-faint:  #626879;

    --cx-line:        rgba(255, 255, 255, 0.10);
    --cx-line-strong: rgba(255, 255, 255, 0.18);

    --cx-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --cx-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    --cx-display: "Orbitron", "Inter", sans-serif;
}

/* ---------- DevTools Hub — was teal #00d4aa ---------- */
html[data-cx-app="devtools"] {
    --bg-primary:       var(--cx-bg);
    --bg-secondary:     rgba(14, 15, 20, 0.9);
    --bg-card:          rgba(10, 11, 16, 0.92);
    --accent-primary:   var(--cx-red);
    --accent-secondary: var(--cx-blue);
    --accent-warm:      var(--cx-gold);
    --text-primary:     var(--cx-text);
    --text-secondary:   var(--cx-text-soft);
    --text-muted:       var(--cx-text-muted);
    --border:           var(--cx-line);
    --shadow:           rgba(0, 0, 0, 0.45);
    --glow-primary:     rgba(255, 49, 95, 0.18);
    --glow-secondary:   rgba(93, 124, 255, 0.14);
}

/* ---------- CaesariumX AI — already red, just off-brand ---------- */
html[data-cx-app="caesar-ai"] {
    --red:        var(--cx-red-deep);
    --red-dark:   var(--cx-red-dark);
    --red-glow:   var(--cx-red);
    --black:      var(--cx-bg);
    --surface:    var(--cx-bg-soft);
    --surface2:   #0d0e13;
    --surface3:   #13151b;
    --border:     var(--cx-line);
    --border-red: rgba(255, 49, 95, 0.28);
    --text:       var(--cx-text);
    --text-muted: var(--cx-text-muted);
    --dot-color:  rgba(255, 49, 95, 0.13);
}

/* ---------- Dark Horse — was purple/cyan.
     --accent-2 carried 31 of the 42 accent uses, so that is the
     one that becomes crimson; the others stay distinct because a
     visualisation lab needs separable colours. ---------- */
html[data-cx-app="caesar-chamber"] {
    --bg-0:          var(--cx-bg);
    --bg-1:          var(--cx-bg-soft);
    --surface:       rgba(14, 15, 20, 0.74);
    --border:        var(--cx-line);
    --border-bright: rgba(255, 49, 95, 0.4);
    --accent:        var(--cx-cyan);
    --accent-2:      var(--cx-red);
    --accent-3:      var(--cx-gold);
    --danger:        var(--cx-orange);
    --success:       var(--cx-green);
    --text-1:        var(--cx-text);
    --text-2:        var(--cx-text-soft);
    --text-3:        var(--cx-text-faint);
    --mono:          var(--cx-mono);
    --sans:          var(--cx-sans);
    --shadow-glow:   0 0 0 1px rgba(255, 49, 95, 0.15), 0 8px 30px rgba(139, 0, 32, 0.25);
}

/* ---------- CipherCraft — was teal #2dd4bf ---------- */
html[data-cx-app="ciphercraft"] {
    --bg-deep:       var(--cx-bg);
    --bg-surface:    var(--cx-bg-soft);
    --bg-elevated:   #0d0e13;
    --bg-panel:      #050609;
    --border-subtle: var(--cx-line);
    --border-accent: var(--cx-line-strong);
    --text-primary:   var(--cx-text);
    --text-secondary: var(--cx-text-soft);
    --text-muted:     var(--cx-text-muted);
    --accent-cyan:  var(--cx-red);   /* the dominant accent */
    --accent-blue:  var(--cx-blue);
    --danger:       var(--cx-orange); /* kept distinct from the accent */
    --success:      var(--cx-green);
    --font-mono:    var(--cx-mono);
    --font-sans:    var(--cx-sans);
}

/* ---------- Crypto Analyst — was pure #000/#0f0/#f00 ---------- */
html[data-cx-app="crypto-analyst"] {
    --primary:       var(--cx-text);
    --primary-dark:  var(--cx-red-deep);
    --bg-dark:       var(--cx-bg);
    --bg-darker:     #000000;
    --bg-card:       var(--cx-bg-card);
    --bg-card-hover: var(--cx-bg-hover);
    --text-primary:   var(--cx-text);
    --text-secondary: var(--cx-text-soft);
    --text-muted:     var(--cx-text-muted);
    --border:        var(--cx-line);
    --border-light:  var(--cx-line-strong);
    --success:       var(--cx-green);   /* was #00ff00 */
    --danger:        var(--cx-red);     /* was #ff0000 */
    --warning:       var(--cx-gold);
    --info:          var(--cx-blue);
}

/* ---------- Footprint Analyzer — was six competing neons ---------- */
html[data-cx-app="imprint"] {
    --bg-void:        var(--cx-bg);
    --bg-deep:        #050609;
    --bg-surface:     var(--cx-bg-soft);
    --bg-elevated:    #0d0e13;
    --bg-glass:       rgba(10, 11, 16, 0.7);
    --bg-glass-hover: rgba(16, 18, 24, 0.85);
    --neon-purple: var(--cx-red);     /* headline accent */
    --neon-pink:   var(--cx-red-deep);
    --neon-cyan:   var(--cx-cyan);
    --neon-green:  var(--cx-green);   /* was #39ff14 */
    --neon-orange: var(--cx-gold);
    --neon-blue:   var(--cx-blue);
    --text-primary:   var(--cx-text);
    --text-secondary: var(--cx-text-muted);
    --text-tertiary:  var(--cx-text-faint);
    --border-hairline: rgba(255, 255, 255, 0.05);
    --border-subtle:   var(--cx-line);
}

/* ============================================================
   Shared chrome — a way back to the platform from every tool.
   Fixed and self-contained so it cannot disturb any app's
   layout, and it steps aside on small screens.
   ============================================================ */
.cx-home {
    position: fixed; right: 16px; bottom: 16px; z-index: 9999;
    display: flex; align-items: center; gap: 0;
    height: 36px; padding: 0; overflow: hidden;
    border-radius: 999px;
    border: 1px solid rgba(255, 49, 95, 0.35);
    background: rgba(6, 6, 10, 0.92);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55);
    text-decoration: none; opacity: 0.62;
    transition: opacity 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.cx-home:hover { opacity: 1; border-color: rgba(255, 49, 95, 0.75); box-shadow: 0 10px 30px rgba(220, 20, 60, 0.3); }

/* Collapsed to a 36px mark by default: none of these six apps has a
   corner that is reliably empty, so the footprint stays minimal and
   only opens on intent. */
.cx-home-mark {
    flex: 0 0 34px; display: grid; place-items: center; height: 34px;
    font-family: "Orbitron", sans-serif; font-size: 0.66rem; font-weight: 900;
    letter-spacing: 0.02em; color: #f7f8fb;
}
.cx-home-mark i { font-style: normal; color: #ff315f; }
.cx-home-label {
    max-width: 0; opacity: 0; white-space: nowrap;
    font-family: "Orbitron", sans-serif; font-size: 0.56rem; font-weight: 800;
    letter-spacing: 0.16em; text-transform: uppercase; color: #f7f8fb;
    transition: max-width 0.28s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s ease, padding 0.28s ease;
}
.cx-home-label i { font-style: normal; color: #ff315f; }
.cx-home:hover .cx-home-label,
.cx-home:focus-visible .cx-home-label { max-width: 150px; opacity: 1; padding-right: 0.95rem; }

@media (max-width: 720px) { .cx-home { right: 10px; bottom: 10px; } }
@media print { .cx-home { display: none; } }