/* axiom-space/assets/styles/cortex.css */
/*
 * P0-10 (Wave 3): Gemini "Void & Signal" design-token layer.
 * Source: gemini.md Section C + ext-docs F-3 LCH palette (perceptually uniform
 * lightness so cyan/magenta/orange at the same L read equally bright). All
 * pre-existing aliases (--void, --cyan, etc.) point at the new tokens so the
 * legacy component CSS keeps working without rename.
 */
:root {
  color-scheme: dark;

  /* Void tiers (background depth) */
  --color-void-0: #020306;
  --color-void-1: #050811;
  --color-void-2: #0b1222;

  /* Signal palette — LCH-authored, hex-converted (ext-docs F-3) */
  --color-signal-cyan:    #00E5FF;
  --color-signal-magenta: #FF00C8;
  --color-signal-orange:  #FF9500;
  --color-signal-green:   #00FFAA;
  --color-signal-red:     #FF3344;
  --color-signal-violet:  #6B00FF;

  /* Text */
  --color-text-hi: #ffffff;
  --color-text-lo: #7d8aa1;

  /* Glass chrome */
  --color-glass-stroke: rgba(0, 229, 255, 0.15);
  --color-glass-fill:   rgba(5, 8, 17, 0.65);

  /* Type ramp (gemini.md Section C-2) */
  --font-display: "Inter Tight", "Inter", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", "SF Mono", ui-monospace, monospace;
  --font-ui:      "Inter Tight", "Inter", system-ui, sans-serif;

  /* Motion ramps */
  --easing-standard: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-micro:  150ms;
  --dur-short:  300ms;
  --dur-medium: 600ms;
  --dur-long:   1200ms;

  /* ───────────────────────────────────────────────────────────────────────── */
  /* Legacy aliases — preserve existing component CSS without rename. */
  --void: var(--color-void-1);
  --ink: var(--color-void-2);
  --carbon: #0f1726;
  --glass: var(--color-glass-fill);
  --glass-border: var(--color-glass-stroke);
  --cyan: var(--color-signal-cyan);
  --cyan-soft: rgba(0, 229, 255, 0.14);
  --cyan-glow: rgba(0, 229, 255, 0.55);
  --purple: var(--color-signal-violet);
  --teal: #14b8a6;
  --orange: var(--color-signal-orange);
  --green: var(--color-signal-green);
  --red: var(--color-signal-red);
  --bone: var(--color-text-hi);
  --muted: var(--color-text-lo);
  --grid-line: rgba(0, 229, 255, 0.04);
  --cortex-motion-scale: 1;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 15% 12%, rgba(168, 85, 247, .12), transparent 28%),
    radial-gradient(circle at 86% 14%, rgba(0, 212, 255, .10), transparent 30%),
    linear-gradient(180deg, var(--void) 0%, var(--ink) 100%);
  color: var(--bone);
  font-family: var(--font-ui);
  /* A.P0.5: allow vertical scroll at 400% zoom; only suppress horizontal overflow. */
  overflow-x: hidden;
  overflow-y: auto;
}
body::before {
  position: fixed;
  inset: 0;
  pointer-events: none;
  content: "";
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(circle at center, black 0%, transparent 80%);
}
.cortex-root {
  display: grid;
  grid-template-rows: 64px 1fr 220px 32px;
  grid-template-columns: 320px 1fr 360px;
  grid-template-areas:
    "topbar  topbar  topbar"
    "leftrail center rightrail"
    "bottom  bottom  bottom"
    "footer  footer  footer";
  height: 100vh;
  gap: 14px;
  padding: 14px;
}
.cortex-topbar    { grid-area: topbar; }
.cortex-leftrail  { grid-area: leftrail; overflow-y: auto; }
.cortex-center    { grid-area: center; position: relative; }
.cortex-rightrail { grid-area: rightrail; overflow-y: auto; }
.cortex-bottom    { grid-area: bottom; }
.cortex-footer    { grid-area: footer; }
.glass-panel {
  /* P0-10 (Wave 3): Gemini "Industrial corners 2px (sharp)" + saturated blur. */
  background: var(--color-glass-fill);
  border: 1.5px solid var(--color-glass-stroke);
  border-radius: 2px;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .02),
    0 0 40px rgba(0, 0, 0, .80);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  padding: 14px 16px;
}
.glow-text {
  color: var(--color-signal-cyan);
  text-shadow: 0 0 12px var(--cyan-glow);
  letter-spacing: .04em;
}
.muted-text {
  /* P0-10 (Wave 3): tightened to gemini.md type-ramp "Label" spec. */
  color: var(--color-text-lo);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: .12em;
  line-height: 1.2;
  text-transform: uppercase;
}
#cortex-canvas { width: 100%; height: 100%; display: block; }
@media (prefers-reduced-motion: reduce) {
  :root { --cortex-motion-scale: 0; }
}
/* A.P1.3: visible keyboard focus indicator for all interactive elements. */
button:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(0, 180, 255, 0.45);
}