/* =====================================================================
   AAhead Control — Twilight design tokens (single source of truth).
   Every color, font, radius, gradient and duration lives here.
   Mirrors port/gui/design/tokens.py — keep them in sync.
   ===================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap");

:root {
  /* ---- Base background ---- */
  --bg-deep: #0F0B1F;
  --bg-mid:  #1A1530;
  --bg-up:   #251C40;

  /* ---- Surfaces ---- */
  --surface-base:     #2A2245;
  --surface-elevated: #352A55;
  --surface-glass:    rgba(60, 50, 95, 0.55);
  --border-soft:      #3D3160;
  --border-bright:    #5F4E8B;

  /* ---- Text ---- */
  --text-primary:   #F2EBFF;
  --text-secondary: #B5A8D6;
  --text-muted:     #7B6FA0;
  --text-disabled:  #524868;

  /* ---- Accent triad (the brand identity — always together) ---- */
  --accent-rose:  #E89FD3;
  --accent-cyan:  #7DCEDD;
  --accent-peach: #F5C19B;

  /* ---- Status ---- */
  --success: #93D9B2;
  --warning: #F5C19B;
  --error:   #E89090;
  --info:    #7DCEDD;

  /* ---- Signature gradients ---- */
  --focus-glow:  linear-gradient(135deg, #E89FD3 0%, #7DCEDD 100%);
  --card-depth:  linear-gradient(160deg, #2A2245 0%, #1A1530 100%);
  --hero-warmth: linear-gradient(180deg, #352A55 0%, #2A2245 50%, #1A1530 100%);
  --bg-ambient:  radial-gradient(at 30% 20%, #251C40 0%, #0F0B1F 100%);

  /* ---- Typography ---- */
  --font-hero:  "Space Grotesk", system-ui, sans-serif;
  --font-title: "Space Grotesk", system-ui, sans-serif;
  --font-body:  "Inter", system-ui, sans-serif;
  --font-mono:  "JetBrains Mono", ui-monospace, monospace;

  --fs-hero:    28px;
  --fs-title:   20px;
  --fs-body:    16px;
  --fs-caption: 13px;
  --fs-mono:    12px;
  --fs-eyebrow: 11px;

  --tracking-hero:    -0.5px;
  --tracking-title:   -0.3px;
  --tracking-caption: 0.2px;
  --tracking-eyebrow: 1.5px;

  /* ---- Spacing (4 px grid) ---- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-12: 48px;
  --sp-16: 64px;

  /* ---- Radii ---- */
  --r-card:   12px;
  --r-button: 8px;
  --r-chip:   6px;
  --r-pill:   999px;

  /* ---- Strokes ---- */
  --stroke-1: 1px solid var(--border-soft);
  --stroke-1-bright: 1px solid var(--border-bright);

  /* ---- Fixed regions ---- */
  --statusbar-h: 48px;
  --footer-h:   32px;
  --safe-inset: 16px;

  /* ---- Motion (annotation only — we animate in pygame) ---- */
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-press:     cubic-bezier(0.4, 0, 0.2, 1);

  --dur-micro: 100ms;
  --dur-fast:  180ms;
  --dur-base:  280ms;
  --dur-slow:  400ms;

}

/* =====================================================================
   Reset + 640x480 stage
   ===================================================================== */
* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  width: 100%;
  min-height: 100%;
  background: #07050E;
  font-family: var(--font-body);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

body {
  width: 640px;
  height: 480px;
  margin: 0 auto;
  overflow: hidden;
}

.stage {
  position: relative;
  width: 640px;
  height: 480px;
  overflow: hidden;
  background: var(--bg-ambient);
  border-radius: 4px;
  font-family: var(--font-body);
  color: var(--text-primary);
  font-size: var(--fs-body);
  line-height: 1.35;
  isolation: isolate;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.03);
}

/* ambient grain — VHS-subtle, surfaces-only intent kept restrained */
.stage::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.55 0'/></filter><rect width='240' height='240' filter='url(%23n)'/></svg>");
  opacity: 0.05;
  mix-blend-mode: overlay;
  z-index: 99;
}

/* very faint mathematical grid in bg, matching philosophy doc */
.stage::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(125, 206, 221, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(232, 159, 211, 0.03) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(at 50% 60%, #000 0%, transparent 75%);
  z-index: 0;
}

/* =====================================================================
   Status bar + footer hint (fixed regions on every screen)
   ===================================================================== */
.statusbar {
  position: absolute; top: 0; left: 0; right: 0;
  height: var(--statusbar-h);
  padding: 0 var(--safe-inset);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3);
  z-index: 5;
}
.statusbar .sb-left {
  display: flex; align-items: center; gap: var(--sp-3);
  min-width: 0;
}
.statusbar .sb-right {
  display: flex; align-items: center; gap: var(--sp-4);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  color: var(--text-secondary);
  letter-spacing: 0.3px;
}
.statusbar .sb-right .chip {
  display: inline-flex; align-items: center; gap: 6px;
}
.statusbar .sb-right .chip i { font-size: 16px; color: var(--text-secondary); }

.eyebrow {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-secondary);
}
.sb-title {
  font-family: var(--font-title);
  font-weight: 600;
  font-size: var(--fs-title);
  letter-spacing: var(--tracking-title);
  color: var(--text-primary);
  line-height: 1;
}
.sb-back {
  width: 24px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-secondary);
  font-size: 22px;
}

.footer-hint {
  position: absolute; bottom: 0; left: 0; right: 0;
  height: var(--footer-h);
  padding: 0 var(--safe-inset);
  display: flex; align-items: center; justify-content: center;
  gap: var(--sp-6);
  z-index: 5;
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  color: var(--text-secondary);
  letter-spacing: var(--tracking-caption);
  border-top: 1px solid rgba(61, 49, 96, 0.45);
  background: linear-gradient(180deg, rgba(15,11,31,0) 0%, rgba(15,11,31,0.6) 100%);
}
.footer-hint .hint {
  display: inline-flex; align-items: center; gap: 8px;
}
.footer-hint .btn-glyph {
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--text-muted);
  border-radius: 999px;
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 11px;
  color: var(--text-secondary);
}

/* =====================================================================
   Body region (between status bar and footer)
   ===================================================================== */
.body {
  position: absolute;
  top: var(--statusbar-h);
  left: 0; right: 0;
  bottom: var(--footer-h);
  padding: 0 var(--safe-inset);
  z-index: 2;
  display: flex; flex-direction: column;
}

/* =====================================================================
   Generic card / tile / row primitives
   ===================================================================== */
.card {
  position: relative;
  background: var(--card-depth);
  border: var(--stroke-1);
  border-radius: var(--r-card);
}
/* glassy inner highlight on every card */
.card::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0) 35%);
  pointer-events: none;
}

/* Focus ring — THE signature.
   Apply .is-focused to any focusable element. Implementation:
   - inner: 2px border via padding-box mask trick (using a wrapper)
   - outer: soft 12px glow at 30% opacity, rose→cyan
   - surface lifts to elevated
   - scale 1.03 (set per-component to avoid layout shifts on lists) */
.is-focused {
  background: linear-gradient(160deg, var(--surface-elevated) 0%, var(--surface-base) 100%);
  border-color: transparent;
  box-shadow:
    0 0 0 2px transparent,
    0 0 18px rgba(232, 159, 211, 0.30),
    0 0 24px rgba(125, 206, 221, 0.25);
}
.is-focused::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 2px;                  /* gradient-border via mask */
  background: var(--focus-glow);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
}

/* When something is focused on a screen, non-focused content dims to ~60% */
.dim { opacity: 0.6; }

/* =====================================================================
   Hero zone (module screens)
   ===================================================================== */
.hero-zone {
  height: 130px;
  padding: var(--sp-4) 0 var(--sp-3);
  display: flex; align-items: center; gap: var(--sp-4);
  border-bottom: 1px solid var(--border-soft);
}
.hero-icon {
  width: 64px; height: 64px;
  border-radius: 14px;
  background: var(--focus-glow);
  display: inline-flex; align-items: center; justify-content: center;
  color: #1A1530;
  font-size: 36px;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.15) inset,
    0 8px 20px -8px rgba(232, 159, 211, 0.5);
}
.hero-title {
  font-family: var(--font-hero);
  font-weight: 700;
  font-size: var(--fs-hero);
  letter-spacing: var(--tracking-hero);
  line-height: 1.1;
  color: var(--text-primary);
}
.hero-sub {
  margin-top: 4px;
  font-size: var(--fs-body);
  color: var(--text-secondary);
}

/* =====================================================================
   List row (56 / 64 px)
   ===================================================================== */
.list { display: flex; flex-direction: column; gap: var(--sp-2); }
.row {
  position: relative;
  height: 56px;
  padding: 0 var(--sp-4);
  display: flex; align-items: center; gap: var(--sp-4);
  background: var(--card-depth);
  border: var(--stroke-1);
  border-radius: var(--r-button);
}
.row.with-subline { height: 64px; }
.row .row-icon {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-secondary);
  font-size: 22px;
}
.row .row-label {
  flex: 1; min-width: 0;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-body);
  color: var(--text-primary);
}
.row .row-meta {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  color: var(--text-muted);
}
.row .row-chevron {
  width: 16px; color: var(--text-muted); font-size: 18px;
}
.row.with-subline .row-stack { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.row.with-subline .row-stack .row-label { font-weight: 600; font-size: 16px; }
.row.with-subline .row-stack .row-sub { font-size: var(--fs-caption); color: var(--accent-cyan); letter-spacing: var(--tracking-caption); }

.row.is-focused .row-icon { color: var(--accent-rose); }
.row.is-focused .row-chevron { color: var(--text-primary); }
.row.is-disabled .row-icon,
.row.is-disabled .row-label { color: var(--text-disabled); }

/* =====================================================================
   Buttons
   ===================================================================== */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 var(--sp-4);
  border-radius: var(--r-button);
  background: var(--surface-base);
  border: var(--stroke-1);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-body);
  cursor: default;
}
.btn.btn-primary { font-weight: 600; }
.btn.is-disabled { color: var(--text-disabled); border-color: rgba(61,49,96,0.5); }

/* =====================================================================
   Progress bar
   ===================================================================== */
.progress {
  position: relative;
  height: 6px;
  border-radius: 999px;
  background: var(--border-soft);
  overflow: hidden;
}
.progress > .fill {
  height: 100%;
  background: var(--focus-glow);
  border-radius: 999px;
}

/* =====================================================================
   SVG icon helpers — icons referenced via <svg class="ico"><use href="#ph-X"/></svg>
   Sprite is inlined at the top of each screen <body> (see icons.svg /
   _sprite-snippet.html).  Color via `color` → fill: currentColor on symbols.
   ===================================================================== */
.ico {
  display: inline-block;
  width: 1em; height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  color: var(--text-secondary);
  flex-shrink: 0;
}
.ico-rose    { color: var(--accent-rose); }
.ico-cyan    { color: var(--accent-cyan); }
.ico-peach   { color: var(--accent-peach); }
.ico-muted   { color: var(--text-muted); }
.ico-primary { color: var(--text-primary); }
.ico-success { color: var(--success); }
.ico-error   { color: var(--error); }
.ico-disabled{ color: var(--text-disabled); }

/* Gradient-filled icon (used for the focused glyph on home tiles / hero glyph) */
.ico-grad { fill: url(#grad-focus); color: var(--accent-rose); }

/* Spinner ring (loading) */
@keyframes spin { to { transform: rotate(360deg); } }
.spinner {
  width: 28px; height: 28px;
  border-radius: 999px;
  background:
    conic-gradient(from 0deg, transparent 0%, var(--accent-rose) 40%, var(--accent-cyan) 90%, transparent 100%);
  -webkit-mask: radial-gradient(circle, transparent 9px, #000 10px);
          mask: radial-gradient(circle, transparent 9px, #000 10px);
  animation: spin 1.1s linear infinite;
}

/* Shimmer (skeleton) */
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
.shimmer {
  background: linear-gradient(90deg,
    rgba(94, 78, 139, 0.18) 0%,
    rgba(232, 159, 211, 0.22) 50%,
    rgba(94, 78, 139, 0.18) 100%);
  background-size: 200% 100%;
  animation: shimmer 1200ms linear infinite;
  border-radius: 6px;
}
