/* UHI · design tokens · v1 (2026-10)
   "Signal Green": a near-black forest ground, white type, one signal-green network, gold only where income is.
   Import this once; every colour, radius, shadow and type family in the brand hangs off these variables. */

:root {
  /* ground: the dark the network lights up against */
  --uhi-ground-deep: #03110B;
  --uhi-ground:      #061C14;
  --uhi-ground-lift: #0A2A1F;
  --uhi-forest:      #0E3D2C;

  /* green: the live network, the signal */
  --uhi-green-deep: #128A52;
  --uhi-green:      #1FBF75;
  --uhi-green-hi:   #35D98B;
  --uhi-mint:       #8AF0BE;

  /* gold: income. The coin, the payout, the price, the one accent */
  --uhi-gold-deep:  #C9961F;
  --uhi-gold:       #F0C14B;
  --uhi-gold-light: #FFE08A;
  --uhi-gold-ink:   #2A1E05;      /* type on a gold ground */

  /* ink on light grounds (print, white documents) */
  --uhi-ink:   #04120C;
  --uhi-paper: #F3F7F4;

  /* text on the ground */
  --uhi-text-hi:    #FFFFFF;
  --uhi-text-mid:   rgba(255, 255, 255, 0.74);
  --uhi-text-lo:    rgba(255, 255, 255, 0.52);
  --uhi-text-faint: rgba(255, 255, 255, 0.30);

  /* glass */
  --uhi-glass-1: rgba(255, 255, 255, 0.05);
  --uhi-glass-2: rgba(255, 255, 255, 0.10);
  --uhi-line:    rgba(255, 255, 255, 0.11);
  --uhi-rim-top:    rgba(214, 255, 236, 0.70);
  --uhi-rim-left:   rgba(138, 240, 190, 0.40);
  --uhi-rim-right:  rgba(255, 224, 138, 0.50);
  --uhi-rim-bottom: rgba(240, 193, 75, 0.40);

  /* state */
  --uhi-live:  #8AF0BE;
  --uhi-warn:  #FFE08A;
  --uhi-error: #FF8A8A;

  /* type */
  --uhi-display: "Sora", "Helvetica Neue", Arial, sans-serif;
  --uhi-ui:      "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --uhi-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* shape */
  --uhi-r-sm: 12px;
  --uhi-r-md: 20px;
  --uhi-r-lg: 26px;
  --uhi-r-xl: 32px;
  --uhi-r-pill: 999px;

  /* elevation */
  --uhi-shadow-card:  0 24px 40px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  --uhi-shadow-gold:  0 12px 30px rgba(240, 193, 75, 0.32);
  --uhi-shadow-green: 0 12px 30px rgba(31, 191, 117, 0.38);

  /* motion */
  --uhi-ease: cubic-bezier(.2, .8, .2, 1);
  --uhi-fast: .18s;
  --uhi-base: .32s;
  --uhi-slow: .7s;
}

/* gradients, as reusable images */
:root {
  --uhi-grad-green:  linear-gradient(135deg, var(--uhi-green-hi), var(--uhi-green) 55%, var(--uhi-green-deep));
  --uhi-grad-gold:   linear-gradient(135deg, var(--uhi-gold-light), var(--uhi-gold) 60%, var(--uhi-gold-deep));
  --uhi-grad-ground: linear-gradient(180deg, #0A2A1F 0%, #061C14 55%, #03110B 100%);
}