/* ============================================================
   PINEAPPLE AI — DESIGN TOKENS
   v0.1 — arcade HUD / Metal Slug-inspired
   ============================================================ */

:root {
  /* -------- COLOR ------------------------------------------ */
  /* Surfaces — warm espresso, never pure black */
  --p-bg-0:        #1a0f05;  /* deepest — page background */
  --p-bg-1:        #241608;  /* panel background */
  --p-bg-2:        #2e1d0c;  /* raised surface */
  --p-bg-3:        #3a2612;  /* hover / active surface */
  --p-line:        #5a3d1c;  /* hairline borders */
  --p-line-strong: #8a6a32;  /* emphasized borders */

  /* Ink — warm cream on dark, never pure white */
  --p-ink-0:       #f5e6b8;  /* primary text */
  --p-ink-1:       #d4b97a;  /* secondary text */
  --p-ink-2:       #8a6a32;  /* tertiary / metadata */
  --p-ink-3:       #5a3d1c;  /* disabled */

  /* Brand — pineapple gold */
  --p-gold-100:    #fff3c4;
  --p-gold-200:    #ffe088;
  --p-gold-300:    #f5c842;  /* primary brand */
  --p-gold-400:    #e8b84a;
  --p-gold-500:    #c9972f;
  --p-gold-600:    #8a6a14;

  /* Status — arcade HUD vocabulary */
  --p-live:        #7fe84a;  /* STATUS: LIVE, phosphor green */
  --p-live-dim:    #4a8a2e;
  --p-warn:        #ffb347;  /* caution / building */
  --p-danger:      #ff5a3c;  /* error / offline */
  --p-mystery:     #b565d8;  /* ??? classified, for future use */

  /* Hazard stripes (for borders, barriers, "classified" tape) */
  --p-hazard-a:    #f5c842;
  --p-hazard-b:    #1a0f05;

  /* -------- TYPOGRAPHY ------------------------------------- */
  --p-font-display: "Press Start 2P", "VT323", ui-monospace, monospace;
  --p-font-ui:      "VT323", "JetBrains Mono", ui-monospace, monospace;
  --p-font-body:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Type scale — pixel fonts render chunky; scale is tighter */
  --p-text-3xs: 8px;    /* pixel-font micro label (use sparingly) */
  --p-text-2xs: 10px;   /* pixel-font HUD labels */
  --p-text-xs:  12px;   /* metadata, timestamps */
  --p-text-sm:  14px;   /* secondary body */
  --p-text-md:  16px;   /* body */
  --p-text-lg:  20px;   /* lead body */
  --p-text-xl:  24px;   /* VT323 callouts */
  --p-text-2xl: 32px;   /* pixel h3 */
  --p-text-3xl: 44px;   /* pixel h2 */
  --p-text-4xl: 64px;   /* pixel h1 */
  --p-text-5xl: 88px;   /* pixel display */

  --p-leading-tight:  1.1;
  --p-leading-snug:   1.3;
  --p-leading-normal: 1.55;
  --p-leading-loose:  1.8;

  --p-tracking-tight:  -0.01em;
  --p-tracking-normal: 0;
  --p-tracking-wide:   0.08em;
  --p-tracking-wider:  0.16em;
  --p-tracking-widest: 0.24em;

  /* -------- SPACE ------------------------------------------ */
  /* 4px base; arcade panels like chunky gaps */
  --p-space-0:  0px;
  --p-space-1:  4px;
  --p-space-2:  8px;
  --p-space-3:  12px;
  --p-space-4:  16px;
  --p-space-5:  24px;
  --p-space-6:  32px;
  --p-space-7:  48px;
  --p-space-8:  64px;
  --p-space-9:  96px;
  --p-space-10: 128px;

  /* -------- RADII ------------------------------------------ */
  /* Arcade HUD doesn't round. Sharp edges are the rule. */
  --p-radius-0: 0px;       /* default everywhere */
  --p-radius-1: 2px;       /* allowed for very small chips */
  --p-radius-pill: 999px;  /* rare — only for coin-like elements */

  /* -------- BORDERS ---------------------------------------- */
  --p-border-hair:   1px solid var(--p-line);
  --p-border-panel:  2px solid var(--p-line-strong);
  --p-border-bold:   3px solid var(--p-gold-400);
  --p-border-double: 4px double var(--p-gold-400);

  /* -------- SHADOWS ---------------------------------------- */
  /* Hard-edged pixel-art shadow offsets, never blurry */
  --p-shadow-pixel-sm: 2px 2px 0 0 var(--p-bg-0);
  --p-shadow-pixel-md: 4px 4px 0 0 var(--p-bg-0);
  --p-shadow-pixel-lg: 6px 6px 0 0 var(--p-bg-0);
  --p-shadow-gold-sm:  2px 2px 0 0 var(--p-gold-500);
  --p-shadow-gold-md:  4px 4px 0 0 var(--p-gold-500);
  --p-shadow-inset:    inset 0 0 0 1px var(--p-line-strong);
  --p-glow-gold:       0 0 16px rgba(245,200,66,0.35);
  --p-glow-live:       0 0 12px rgba(127,232,74,0.45);

  /* -------- MOTION ----------------------------------------- */
  --p-dur-instant: 80ms;
  --p-dur-fast:    160ms;
  --p-dur-base:    240ms;
  --p-dur-slow:    480ms;
  /* Arcade motion is STEPPED, not smooth. */
  --p-ease-step-2: steps(2, end);
  --p-ease-step-4: steps(4, end);
  --p-ease-step-8: steps(8, end);
  --p-ease-out:    cubic-bezier(0.2, 0.8, 0.2, 1);
  --p-ease-in:     cubic-bezier(0.8, 0, 0.8, 0.2);

  /* -------- LAYOUT ----------------------------------------- */
  --p-container: 1200px;
  --p-container-wide: 1400px;
  --p-grid-gutter: var(--p-space-5);

  /* -------- Z-INDEX ---------------------------------------- */
  --p-z-base: 1;
  --p-z-sticky: 10;
  --p-z-overlay: 100;
  --p-z-modal: 1000;
  --p-z-toast: 10000;
}

/* ============================================================
   BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--p-bg-0);
  color: var(--p-ink-0);
  font-family: var(--p-font-body);
  font-size: var(--p-text-md);
  line-height: var(--p-leading-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}
::selection { background: var(--p-gold-300); color: var(--p-bg-0); }

/* Crisp pixel rendering for pixel imagery */
.p-pixelated { image-rendering: pixelated; image-rendering: crisp-edges; }

/* ============================================================
   PATTERNS — hazard stripes, scanlines, CRT, dot-grid
   ============================================================ */
.p-hazard-tape {
  background-image: repeating-linear-gradient(
    -45deg,
    var(--p-hazard-a) 0 10px,
    var(--p-hazard-b) 10px 20px
  );
}
.p-hazard-tape-thin {
  background-image: repeating-linear-gradient(
    -45deg,
    var(--p-hazard-a) 0 6px,
    var(--p-hazard-b) 6px 12px
  );
}

.p-scanlines::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0 2px,
    rgba(0,0,0,0.18) 2px 3px
  );
  mix-blend-mode: multiply;
  z-index: 2;
}

.p-dot-grid {
  background-image:
    radial-gradient(circle, var(--p-line) 1px, transparent 1px);
  background-size: 16px 16px;
}

/* CRT vignette + subtle curvature hint */
.p-crt {
  position: relative;
  overflow: hidden;
}
.p-crt::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse at center,
    transparent 60%,
    rgba(0,0,0,0.55) 100%
  );
  z-index: 3;
}

/* ============================================================
   ATOMS
   ============================================================ */

/* Pixel display heading */
.p-display {
  font-family: var(--p-font-display);
  letter-spacing: var(--p-tracking-wide);
  line-height: var(--p-leading-tight);
  text-transform: uppercase;
  color: var(--p-gold-300);
  text-shadow: 3px 3px 0 var(--p-bg-0);
}

.p-label {
  font-family: var(--p-font-display);
  font-size: var(--p-text-2xs);
  letter-spacing: var(--p-tracking-wider);
  text-transform: uppercase;
  color: var(--p-ink-2);
}

.p-mono {
  font-family: var(--p-font-body);
  letter-spacing: var(--p-tracking-normal);
}

/* Panel — arcade HUD container with corner bolts */
.p-panel {
  position: relative;
  background: var(--p-bg-1);
  border: var(--p-border-panel);
  padding: var(--p-space-5);
}
.p-panel--bolted::before,
.p-panel--bolted::after,
.p-panel--bolted > .p-bolt {
  content: "";
  position: absolute;
  width: 6px; height: 6px;
  background: var(--p-gold-400);
  box-shadow: inset 1px 1px 0 rgba(255,255,255,0.35),
              inset -1px -1px 0 rgba(0,0,0,0.45);
}
.p-panel--bolted::before { top: 6px;    left: 6px; }
.p-panel--bolted::after  { top: 6px;    right: 6px; }
.p-panel--bolted .p-bolt.p-bolt--bl { bottom: 6px; left: 6px; top:auto; }
.p-panel--bolted .p-bolt.p-bolt--br { bottom: 6px; right: 6px; top:auto; }

/* Buttons */
.p-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--p-space-2);
  padding: 10px 20px;
  font-family: var(--p-font-display);
  font-size: var(--p-text-2xs);
  line-height: 1;
  letter-spacing: var(--p-tracking-wider);
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  border: 2px solid var(--p-gold-400);
  background: transparent;
  color: var(--p-gold-300);
  cursor: pointer;
  transition: transform var(--p-dur-fast) var(--p-ease-out),
              background var(--p-dur-fast);
  box-shadow: var(--p-shadow-pixel-sm);
}
.p-btn:hover {
  background: var(--p-gold-300);
  color: var(--p-bg-0);
  transform: translate(-2px, -2px);
  box-shadow: var(--p-shadow-pixel-md);
}
.p-btn:active {
  transform: translate(1px, 1px);
  box-shadow: none;
}
.p-btn--primary {
  background: var(--p-gold-300);
  color: var(--p-bg-0);
}
.p-btn--primary:hover {
  background: var(--p-gold-200);
}
.p-btn--ghost {
  border-color: var(--p-line-strong);
  color: var(--p-ink-1);
  box-shadow: none;
}
.p-btn--ghost:hover {
  background: var(--p-bg-2);
  color: var(--p-gold-300);
  border-color: var(--p-gold-400);
  transform: none;
  box-shadow: none;
}

/* Status tag */
.p-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  font-family: var(--p-font-display);
  font-size: var(--p-text-2xs);
  letter-spacing: var(--p-tracking-wider);
  text-transform: uppercase;
  border: 1px solid currentColor;
  background: rgba(0,0,0,0.4);
}
.p-tag--live   { color: var(--p-live); }
.p-tag--live::before {
  content: ""; width: 6px; height: 6px; background: currentColor;
  box-shadow: var(--p-glow-live);
  animation: p-blink 1s var(--p-ease-step-2) infinite;
}
.p-tag--warn   { color: var(--p-warn); }
.p-tag--danger { color: var(--p-danger); }
.p-tag--classified { color: var(--p-mystery); }
.p-tag--secret { color: #e05050; }
.p-tag--secret::before {
  content: ""; width: 6px; height: 6px; background: currentColor;
  box-shadow: 0 0 8px #e05050;
  animation: p-blink 1.4s var(--p-ease-step-2) infinite;
}

/* Links */
.p-link {
  color: var(--p-gold-300);
  text-decoration: none;
  border-bottom: 1px dashed currentColor;
  transition: color var(--p-dur-fast);
}
.p-link:hover { color: var(--p-gold-200); border-bottom-style: solid; }

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes p-blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}
@keyframes p-cursor {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}
@keyframes p-scroll-stripes {
  from { background-position: 0 0; }
  to   { background-position: 28px 0; }
}
@keyframes p-crt-flicker {
  0%, 95%, 100% { opacity: 1; }
  96% { opacity: 0.85; }
  97% { opacity: 1; }
  98% { opacity: 0.9; }
}
@keyframes p-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}
.p-cursor::after {
  content: "_";
  animation: p-cursor 1s var(--p-ease-step-2) infinite;
  margin-left: 2px;
}
.p-hazard-animate {
  animation: p-scroll-stripes 1.6s linear infinite;
}

/* ============================================================
   UTILITIES
   ============================================================ */
.p-sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.p-container { max-width: var(--p-container); margin: 0 auto; padding: 0 var(--p-space-5); }
.p-container-wide { max-width: var(--p-container-wide); margin: 0 auto; padding: 0 var(--p-space-5); }

.p-stack-1 > * + * { margin-top: var(--p-space-1); }
.p-stack-2 > * + * { margin-top: var(--p-space-2); }
.p-stack-3 > * + * { margin-top: var(--p-space-3); }
.p-stack-4 > * + * { margin-top: var(--p-space-4); }
.p-stack-5 > * + * { margin-top: var(--p-space-5); }
.p-stack-6 > * + * { margin-top: var(--p-space-6); }
.p-stack-7 > * + * { margin-top: var(--p-space-7); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}