/* ============================================================
   THE SPEEX — DESIGN TOKENS
   Palette: CANDY NIGHT
   ------------------------------------------------------------
   The base moved off purple and onto a deep marine navy. Purple
   is now a guest, not the host: it survives only as car paint and
   the odd window. What carries the identity instead is the pair
   the brand art actually leads with — candy pink and aqua — with
   gold reserved for currency and cream for anything you read.
   ============================================================ */

:root {
  /* ---- NIGHT: the substrate ------------------------------ */
  --void:        #070E22;
  --void-2:      #0A1430;
  --panel:       #101B3D;
  --panel-2:     #16244D;
  --panel-3:     #1E3068;

  /* ---- LINES --------------------------------------------- */
  --line:        #23356E;
  --line-hi:     #32499A;
  --line-hot:    rgba(255, 63, 164, 0.42);
  --line-cold:   rgba(53, 223, 240, 0.38);

  /* ---- PINK: brand, primary action, the player ----------- */
  --pink:        #FF3FA4;
  --pink-lo:     #C41E75;
  --pink-hi:     #FF8AC8;
  --pink-glow:   rgba(255, 63, 164, 0.55);
  --pink-wash:   rgba(255, 63, 164, 0.11);

  /* ---- AQUA: state, telemetry, nitro, glass -------------- */
  --aqua:        #35DFF0;
  --aqua-lo:     #1893A8;
  --aqua-hi:     #A8F4FF;
  --aqua-glow:   rgba(53, 223, 240, 0.45);
  --aqua-wash:   rgba(53, 223, 240, 0.10);

  /* ---- MINT: positive, "ahead", online ------------------- */
  --mint:        #46E5B0;
  --mint-lo:     #17A177;
  --mint-glow:   rgba(70, 229, 176, 0.45);

  /* ---- GOLD: currency, and only currency ----------------- */
  --gold:        #FFC93C;
  --gold-lo:     #D89B0E;
  --gold-hi:     #FFE79A;
  --gold-glow:   rgba(255, 201, 60, 0.55);
  --gold-wash:   rgba(255, 201, 60, 0.11);

  /* ---- VIOLET: a guest, used sparingly ------------------- */
  --violet:      #8B6BFF;

  /* ---- NEUTRAL RAMP — warm, so nothing reads clinical ---- */
  --txt-hi:      #FFF6EC;
  --txt:         #BDCAE8;
  --txt-dim:     #7C8CBC;
  --txt-ghost:   #4C5D92;

  /* ---- SIGNAL ------------------------------------------- */
  --danger:      #FF5C77;

  /* Legacy aliases — older rules still reach for these names. */
  --ember: var(--pink);       --ember-lo: var(--pink-lo);
  --ember-hi: var(--pink-hi); --ember-glow: var(--pink-glow);
  --ember-wash: var(--pink-wash);
  --magenta: var(--pink);     --magenta-lo: var(--pink-lo);
  --magenta-hi: var(--pink-hi); --magenta-glow: var(--pink-glow);
  --magenta-wash: var(--pink-wash);
  --ice: var(--aqua);         --ice-lo: var(--aqua-lo);
  --ice-hi: var(--aqua-hi);   --ice-glow: var(--aqua-glow);
  --ice-wash: var(--aqua-wash);
  --cyan: var(--aqua);        --cyan-lo: var(--aqua-lo);
  --cyan-hi: var(--aqua-hi);  --cyan-glow: var(--aqua-glow);
  --cyan-wash: var(--aqua-wash);
  --violet-hi: #B9A4FF;       --violet-lo: #5B3FD6;
  --violet-wash: rgba(139, 107, 255, 0.12);

  /* ---- TYPE --------------------------------------------- */
  --f-display:   'Anton', 'Arial Narrow', sans-serif;
  --f-ui:        'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
  --f-mono:      'JetBrains Mono', ui-monospace, 'Consolas', monospace;

  --micro-size:  10px;
  --micro-track: 0.22em;

  /* ---- GEOMETRY ----------------------------------------- */
  --cut:         14px;
  --cut-sm:      8px;
  --cut-lg:      22px;

  /* ---- MOTION ------------------------------------------- */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-snap:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-fast:      140ms;
  --t-med:       260ms;
  --t-slow:      520ms;

  /* ---- ELEVATION ---------------------------------------- */
  --lift-1: 0 2px 10px rgba(2, 6, 18, 0.55);
  --lift-2: 0 12px 40px rgba(2, 6, 18, 0.68);
  --lift-3: 0 32px 90px rgba(2, 6, 18, 0.82);

  /* ---- NEON: reusable glow recipes ----------------------- */
  --neon-pink: 0 0 12px var(--pink-glow), 0 0 34px rgba(255, 63, 164, 0.28);
  --neon-aqua: 0 0 12px var(--aqua-glow), 0 0 34px rgba(53, 223, 240, 0.26);
  --neon-gold: 0 0 12px var(--gold-glow), 0 0 34px rgba(255, 201, 60, 0.26);
  --neon-mint: 0 0 12px var(--mint-glow), 0 0 30px rgba(70, 229, 176, 0.24);
}

/* ---- The chamfer system ------------------------------------- */
.cut {
  clip-path: polygon(
    var(--cut) 0%, 100% 0%, 100% calc(100% - var(--cut)),
    calc(100% - var(--cut)) 100%, 0% 100%, 0% var(--cut)
  );
}
.cut-sm {
  clip-path: polygon(
    var(--cut-sm) 0%, 100% 0%, 100% calc(100% - var(--cut-sm)),
    calc(100% - var(--cut-sm)) 100%, 0% 100%, 0% var(--cut-sm)
  );
}
.cut-lg {
  clip-path: polygon(
    var(--cut-lg) 0%, 100% 0%, 100% calc(100% - var(--cut-lg)),
    calc(100% - var(--cut-lg)) 100%, 0% 100%, 0% var(--cut-lg)
  );
}
.cut-tr {
  clip-path: polygon(
    0% 0%, calc(100% - var(--cut-sm)) 0%, 100% var(--cut-sm), 100% 100%, 0% 100%
  );
}