/* ============================================================
   Panda AI — Design System Tokens  ("Midnight")
   Import this BEFORE any page-specific stylesheet.

   DESIGN PRINCIPLES (single source of truth — change here, not in pages):
   1. One accent. Green is the ONLY highlight colour (emphasis, CTAs, live
      state, top scores). To re-theme the whole product, change the green ramp
      below (--leaf / --leaf-bright / --forest); everything keys off it.
   2. Dark & matte. Deep surfaces (--void/--bg) under a translucent veil;
      content sits on frosted glass (.glass), never flat opaque fills.
   3. Type triad, used by role — never mix fonts ad hoc:
        --font-display (Fraunces)  → editorial headlines only (italic standout)
        --font-ui      (Outfit)    → all UI + body text
        --font-mono    (JetBrains) → scores, labels, eyebrows, data, timestamps
   4. Fluid scale & rhythm. Size from --step-* and space from --space-*; radii
      from --r-*. Don't hard-code px for type, spacing, radius, or brand colour.
   5. Score tiers are semantic: 8-10 dark green, 5-7 light green, 3-4 amber,
      1-2 red (see page score--hi/mid/lo/min).
   ============================================================ */

:root {
  /* ---- Greens (the highlight colour) ---- */
  --forest-deep: #ECF3EE;   /* near-white — used for headings on dark */
  --forest:      #34C77A;   /* bright green — hover/emphasis text + green chrome */
  --leaf:        #2FBE6A;   /* primary brand green */
  --leaf-bright: #4DE88E;   /* lively highlight / glow */
  --moss:        #7FA98C;
  --bamboo:      #243029;   /* deep green tint */

  /* ---- Surfaces (deep matte) ---- */
  --void:        #060809;   /* page base, behind the wallpaper */
  --bg:          #0B0E10;   /* primary dark surface */
  --bg-haze:     #12171A;   /* lighter panel */
  --bg-deep:     #070909;   /* footer / lowest wash */
  --matte:       rgba(8, 11, 12, 0.78);  /* dark veil laid over the wallpaper */

  /* ---- Glass layers (translucent over dark) ---- */
  --glass:        rgba(255, 255, 255, 0.05);
  --glass-strong: rgba(255, 255, 255, 0.085);
  --glass-low:    rgba(255, 255, 255, 0.03);
  --glass-border: rgba(255, 255, 255, 0.10);
  --glass-hair:   rgba(255, 255, 255, 0.07);

  /* ---- Signal (score colours) ---- */
  --signal:      #2FBE6A;   /* high — brand green */
  --signal-glow: rgba(47, 190, 106, 0.45);
  --amber:       #FFB020;
  --amber-glow:  rgba(255, 176, 32, 0.35);
  --red:         #FF5A4D;
  --red-glow:    rgba(255, 90, 77, 0.35);
  --teal:        #2FD0C0;

  /* ---- Brand pop (rarely used) ---- */
  --plum:        #7B6EE8;

  /* ---- Text (light on dark) ---- */
  --text:        rgba(255, 255, 255, 0.92);
  --text-sec:    rgba(255, 255, 255, 0.60);
  --text-ter:    rgba(255, 255, 255, 0.38);
  --text-faint:  rgba(255, 255, 255, 0.16);

  /* ---- Type ---- */
  --font-display: "Fraunces", "Times New Roman", serif;       /* editorial headlines */
  --font-ui:      "Outfit", system-ui, sans-serif;            /* brand UI + body */
  --font-mono:    "JetBrains Mono", ui-monospace, monospace;  /* scores + data */

  /* ---- Type scale (fluid) ---- */
  --step--1: clamp(0.80rem, 0.77rem + 0.15vw, 0.88rem);
  --step-0:  clamp(0.95rem, 0.90rem + 0.25vw, 1.06rem);
  --step-1:  clamp(1.15rem, 1.05rem + 0.45vw, 1.40rem);
  --step-2:  clamp(1.45rem, 1.25rem + 0.95vw, 2.05rem);
  --step-3:  clamp(1.95rem, 1.55rem + 1.95vw, 3.10rem);
  --step-4:  clamp(2.60rem, 1.90rem + 3.40vw, 4.75rem);
  --step-5:  clamp(3.30rem, 2.20rem + 5.40vw, 6.50rem);

  /* ---- Spacing rhythm ---- */
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;
  --space-9: 7rem;

  /* ---- Radius ---- */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-pill: 999px;

  /* ---- Shadows (deep, for dark) ---- */
  --shadow:       0 26px 60px -18px rgba(0, 0, 0, 0.78);
  --shadow-soft:  0 14px 36px -14px rgba(0, 0, 0, 0.6);
  --shadow-frost: 0 12px 36px -12px rgba(0, 0, 0, 0.66), inset 0 1px 0 rgba(255,255,255,0.06);
  --shadow-leaf:  0 16px 44px -12px rgba(47, 190, 106, 0.40);

  /* ---- Motion ---- */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);

  /* ---- Layout ---- */
  --maxw: 1180px;
  --gutter: clamp(1.1rem, 4vw, 2.5rem);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  font-family: var(--font-ui);
  font-size: var(--step-0);
  line-height: 1.6;
  color: var(--text);
  background: var(--void);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
/* the hidden attribute must always win over element rules like `img{display:block}` */
[hidden] { display: none !important; }
a   { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
/* form controls don't inherit the page font by default — force the type system so
   search/chat/date inputs match the rest of the UI (Outfit), not the browser
   default. This is the usual cause of "the fonts look different". */
input, textarea, select { font-family: inherit; font-size: inherit; color: inherit; }

::selection { background: var(--leaf); color: #04140B; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.16); border-radius: 999px; }
::-webkit-scrollbar-track { background: transparent; }

/* ---------- Shared primitives ---------- */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Frosted glass surface — the core Bamboo material */
.glass {
  background: var(--glass);
  backdrop-filter: blur(30px) saturate(150%);
  -webkit-backdrop-filter: blur(30px) saturate(150%);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-frost);
}

/* Eyebrow / kicker */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--leaf);
  font-weight: 500;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: var(--step-0);
  border-radius: var(--r-pill);
  padding: 0.85em 1.7em;
  transition: transform 0.25s var(--ease-spring), box-shadow 0.3s var(--ease-out),
              background 0.3s var(--ease-out);
  white-space: nowrap;
}
.btn:active { transform: scale(0.96); }

.btn--primary {
  background: linear-gradient(135deg, var(--leaf), var(--forest));
  color: #fff;
  box-shadow: var(--shadow-leaf), inset 0 1px 0 rgba(255,255,255,0.25);
}
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 22px 50px -12px rgba(20,80,47,0.50), inset 0 1px 0 rgba(255,255,255,0.30); }

.btn--ghost {
  background: var(--glass);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--glass-border);
  color: var(--forest);
  box-shadow: var(--shadow-frost);
}
.btn--ghost:hover { background: var(--glass-strong); transform: translateY(-2px); }

/* Accessibility */
:focus-visible {
  outline: 2px solid var(--leaf);
  outline-offset: 3px;
  border-radius: 4px;
}

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