/* =============================================================================
   FADE — design tokens.

   Near-black with a single coral red accent, in the Raycast register. The
   accent is only ever brand and interaction; up and down keep their own colours
   so a red button never has to mean "sell".

   Surfaces are glass: translucent, blurred, with a hairline of light on the
   edge rather than a hard grey border. They need something behind them to be
   worth blurring, which is what --ambient is for.
   ========================================================================== */
:root {
  --bg:        #08080a;
  --bg-2:      #0c0c0f;
  --surface:   #121216;
  --surface-2: #17171c;
  --surface-3: #1f1f26;
  --line:      #232329;
  --line-2:    #2e2e36;

  --text:  #ededf0;
  --muted: #93939c;
  --dim:   #85858f;   /* was #63636d = 3.36:1 on the ground, under the 4.5 floor */

  --accent:   #ff6363;
  --accent-2: #ff8a6a;
  --accent-3: #e5484d;
  --fade:      linear-gradient(100deg, #ff8a6a 0%, #ff6363 52%, #e5484d 100%);
  --fade-soft: linear-gradient(100deg, rgba(255,138,106,.14), rgba(255,99,99,.14) 52%, rgba(229,72,77,.16));

  --up:   #3ddc97;
  --down: #e5484d;
  --warn: #f5a524;

  /* ---- glass ---- */
  --glass:      rgba(22,22,27,.62);      /* panels */
  --glass-2:    rgba(30,30,36,.72);      /* raised bits inside a panel */
  --glass-hi:   rgba(255,255,255,.055);  /* hover */
  --glass-line: rgba(255,255,255,.075);  /* the hairline edge */
  --glass-line-2: rgba(255,255,255,.13); /* focus / selected edge */
  --blur:       saturate(150%) blur(20px);
  --blur-soft:  saturate(140%) blur(12px);

  /* the wash that sits behind the glass so it has something to pick up */
  --ambient:
    radial-gradient(70% 55% at 12% 0%, rgba(255,99,99,.10), transparent 60%),
    radial-gradient(55% 50% at 88% 8%, rgba(229,72,77,.08), transparent 62%),
    radial-gradient(60% 60% at 50% 100%, rgba(255,138,106,.05), transparent 65%);

  --radius-s: 10px;
  --radius:   14px;
  --radius-l: 18px;
  --radius-xl: 24px;

  --mono: 'Spline Sans Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --display: 'Archivo', system-ui, sans-serif;

  --shadow:    0 18px 50px -22px rgba(0,0,0,.9);
  --shadow-lg: 0 30px 80px -30px rgba(0,0,0,.95);
  --glow:      0 0 60px -12px rgba(255,99,99,.4);

  --nav-h: 64px;
  --wrap: 1240px;
}