/* ============================================================
   Noctis Swap — design tokens
   Three themes: degen (DEFAULT), dark, light
   Identical token contract to noctis.zone, plus two DEX-only
   tokens (--chart-up / --chart-down).

   SET data-theme ON <html> AND <body>. Not only on the app root.
   Any element that inherits colour instead of declaring it will
   otherwise read the wrong theme. This was a real bug.

   DEFAULT: degen. On noctis.zone the default is light.
   Noctis Swap flips it — a DEX is a trading venue and Degen is
   the trading voice. Light and Dark remain fully supported.
   ============================================================ */

/* ---- DEGEN (Noctis Swap default) ---------------------------- */
:root,
[data-theme="degen"] {
  /* grounds */
  --paper:        #0B0E13;
  --surface:      #12161D;
  --surface-2:    #171C24;
  --hover:        #1E242E;
  --desk:         #07090C;

  /* rules / hairlines */
  --rule:         #242B35;
  --rule-2:       #1E242E;
  --rule-faint:   #1A1F27;
  --rule-strong:  #38414F;

  /* text ramp */
  --ink:          #F4F7FA;
  --t2:           #C7D0DC;
  --t3:           #A8B3C2;
  --t4:           #98A4B4;
  --t5:           #8E9AAB;

  /* accent */
  --blue:         #FF2FB0;   /* FILL ONLY */
  --blue-d:       #FF8AD8;   /* kickers / secondary accent text */
  --blue-h:       #FF57C0;   /* hover fill */
  --blue-t:       #FF8AD8;   /* ACCENT TEXT */

  /* panels */
  --panel:        #141A2B;
  --panel-2:      #111621;
  --panel-3:      #10141A;
  --panel-rule:   #2B3446;
  --panel-inset:  #161C28;
  --scan-track:   #232B38;
  --matrix-head:  #16202E;

  /* semantic */
  --green:        #00FFA3;
  --green-2:      #00FFA3;
  --amber:        #FFD400;
  --red:          #FF5C7A;
  --chip:         #00FFA3;
  --chip-fg:      #07090C;

  /* DEX-only: candles + 24h change figures */
  --chart-up:     #00FFA3;
  --chart-down:   #FF5C7A;

  /* misc */
  --track:        #2A3340;
  --bar-empty:    #161B22;
  --on-blue:      #07090C;   /* dark text on hot magenta */

  /* five-hue accent cycle */
  --c1:           #FF2FB0;
  --c2:           #00E5FF;
  --c3:           #00FFA3;
  --c4:           #FFD400;
  --c5:           #FF7A1A;

  --mark-filter:  invert(1);
  --spear-glow:   0 0 26px rgba(255,47,176,.75);
  /* Degen keeps the magenta brand lockup; Dark and Light wear the kit's theme versions. */
  --lockup-light:   none;
  --lockup-dark:    none;
  --lockup-magenta: block;
  /* The rail's rows out: the white-lettered NOCTIS ZONE and NOCTIS AGENTIC
     logos on this dark ground (ns_brand_logo()). */
  --logo-ondark: block;
  --logo-light:  none;
  /* Settlement chains, told apart by colour in every theme: Cardano blue,
     Midnight violet (noctis.zone's), Solana green. Lighter on dark grounds. */
  --chain-cardano:        #5C8DFF;
  --chain-midnight:       #B98BEA;
  --chain-solana:         #14F195;
}

/* ---- DARK -------------------------------------------------- */
[data-theme="dark"] {
  --paper:        #121212;
  --surface:      #1A1A1A;
  --surface-2:    #202020;
  --hover:        #262626;
  --desk:         #0D0D0D;

  --rule:         #2E2E2E;
  --rule-2:       #282828;
  --rule-faint:   #242424;
  --rule-strong:  #3F3F3F;

  --ink:          #F2F2EF;
  --t2:           #C2C2C2;
  --t3:           #A6A6A6;
  --t4:           #9E9E9E;
  --t5:           #9A9A9A;

  --blue:         #2D3FFF;
  --blue-d:       #8B96FF;
  --blue-h:       #4655FF;
  --blue-t:       #8B96FF;

  --panel:        #15182B;
  --panel-2:      #141726;
  --panel-3:      #1B1B1B;
  --panel-rule:   #2E3350;
  --panel-inset:  #1A1E36;
  --scan-track:   #232840;
  --matrix-head:  #1B2040;

  --green:        #7FD43A;
  --green-2:      #7FD43A;
  --amber:        #D8B23F;
  --red:          #FF7B7F;
  --chip:         #7FD43A;
  --chip-fg:      #121212;

  --chart-up:     #7FD43A;
  --chart-down:   #FF7B7F;

  --track:        #3A3A3A;
  --bar-empty:    #282828;
  --on-blue:      #FFFFFF;

  --c1:           #8B96FF;
  --c2:           #8B96FF;
  --c3:           #8B96FF;
  --c4:           #8B96FF;
  --c5:           #8B96FF;

  --mark-filter:  invert(1);
  --spear-glow:   0 0 22px rgba(45,63,255,.55);
  --lockup-light:   none;
  --lockup-dark:    block;
  --lockup-magenta: none;
  --logo-ondark: block;
  --logo-light:  none;
  /* Settlement chains, told apart by colour in every theme: Cardano blue,
     Midnight violet (noctis.zone's), Solana green. Lighter on dark grounds. */
  --chain-cardano:        #5C8DFF;
  --chain-midnight:       #B98BEA;
  --chain-solana:         #14F195;
}

/* ---- LIGHT ------------------------------------------------- */
[data-theme="light"] {
  --paper:        #F6F6F3;
  --surface:      #FFFFFF;
  --surface-2:    #FAFAF7;
  --hover:        #F1F1EC;
  --desk:         #E8E8E2;

  --rule:         #E2E2DC;
  --rule-2:       #EFEFEA;
  --rule-faint:   #F0F0EB;
  --rule-strong:  #C9C9C2;

  --ink:          #0B0D12;
  --t2:           #4A4F58;
  --t3:           #63676E;
  --t4:           #5F646D;
  --t5:           #666B74;

  --blue:         #2D3FFF;
  --blue-d:       #2433D8;
  --blue-h:       #1E2ED6;
  --blue-t:       #2433D8;

  --panel:        #F4F6FF;
  --panel-2:      #EFF1FB;
  --panel-3:      #EFF1F6;
  --panel-rule:   #D8DCEC;
  --panel-inset:  #F2F4FF;
  --scan-track:   #DDE1F5;
  --matrix-head:  #E7EAFA;

  --green:        #356A0F;
  --green-2:      #2F5F0D;
  --amber:        #745E0F;
  --red:          #B3121C;
  --chip:         #7FD43A;
  --chip-fg:      #0B0D12;

  /* NOTE: Light deliberately uses the DARK chart pair, not the
     dark-on-white --green/--red. Traders read one green and one
     red across the whole product; the chart pair does not
     re-tune per theme. Client decision, do not "fix". */
  --chart-up:     #7FD43A;
  --chart-down:   #FF7B7F;

  --track:        #D6D6D0;
  --bar-empty:    #EFEFEA;
  --on-blue:      #FFFFFF;

  --c1:           #2D3FFF;
  --c2:           #2D3FFF;
  --c3:           #2D3FFF;
  --c4:           #2D3FFF;
  --c5:           #2D3FFF;

  --mark-filter:  none;
  --spear-glow:   none;
  --lockup-light:   block;
  --lockup-dark:    none;
  --lockup-magenta: none;
  /* Light grounds: the kit's light-theme NOCTIS ZONE and NOCTIS AGENTIC
     logos, whose lettering is dark enough to read here. */
  --logo-ondark: none;
  --logo-light:  block;
  /* The same three chains, deep enough to read on a light ground. */
  --chain-cardano:        #0033AD;
  --chain-midnight:       #7B34C9;
  --chain-solana:         #0B8F5A;
}

/* ---- base -------------------------------------------------- */
html, body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

a         { color: var(--blue-t); text-decoration: none; }
a:hover   { color: var(--ink); }

*:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

::selection { background: rgba(45,63,255,.18); }

/* Scrollbars are hidden globally. A visible 15px scrollbar
   breaks the rail and frame widths. */
*                    { scrollbar-width: none; }
*::-webkit-scrollbar  { width: 0; height: 0; display: none; }

input, button, select, textarea { font: inherit; color: inherit; }

/* ---- animations (the complete set — there are only four) --- */

/* status dots */
@keyframes mtBlink {
  0%, 100% { opacity: 1; }
  50%      { opacity: .2; }
}

/* Degen primary CTAs. Requires background-size:300% 100%.
   First and last gradient stops MUST match and travel MUST
   equal exactly one tile, or the loop visibly snaps. */
@keyframes dgDrift {
  0%   { background-position: 0% 50%; }
  100% { background-position: -300% 50%; }
}

/* inactive Degen toggle. Requires background-size:220% 100%. */
@keyframes dgShimmer {
  0%   { background-position: 0% 50%; }
  100% { background-position: -220% 50%; }
}

/* connect-wallet dot */
@keyframes nsPulse {
  0%, 100% { opacity: .35; }
  50%      { opacity: 1; }
}

/* ---- the Degen CTA gradient -------------------------------- */
/* Five stops, deliberately darkened so 11px WHITE text clears
   4.5:1 against every stop. DO NOT BRIGHTEN. */
.ns-cta-degen {
  background: linear-gradient(90deg,
    #A83A80   0%,
    #6E42BC  20%,
    #2D6099  40%,
    #1C7460  60%,
    #7E6522  80%,
    #A83A80 100%);
  background-size: 300% 100%;
  animation: dgDrift 14s linear infinite;
  color: #FFFFFF;
}

/* Inactive Degen toggle: six-stop rainbow at 20% alpha. */
.ns-toggle-degen-idle {
  background: linear-gradient(90deg,
    rgba(255,47,176,.20),
    rgba(122,43,255,.20),
    rgba(0,229,255,.20),
    rgba(0,255,163,.20),
    rgba(255,212,0,.20),
    rgba(255,47,176,.20));
  background-size: 220% 100%;
  animation: dgShimmer 7s linear infinite;
}

/* Active Degen toggle: static, no drift. */
.ns-toggle-degen-on {
  background: linear-gradient(90deg, #FF2FB0, #7A2BFF 55%, #00FFA3);
  color: #FFFFFF;
}

/* ---- header band layers ------------------------------------ */
/* 1. glow  2. rings  3. content. In that order. */
.ns-glow {
  position: absolute; left: 0; right: 0; bottom: 0; height: 78%;
  filter: blur(46px);
  pointer-events: none;
}
[data-theme="degen"] .ns-glow {
  background: linear-gradient(0deg,
    rgba(255,47,176,.34)   0%,
    rgba(122,43,255,.20)  34%,
    rgba(0,229,255,.10)   62%,
    rgba(0,255,163,0)    100%);
}
[data-theme="dark"] .ns-glow,
[data-theme="light"] .ns-glow {
  background: linear-gradient(0deg,
    rgba(45,63,255,.30)   0%,
    rgba(45,63,255,.16)  36%,
    rgba(45,63,255,.06)  66%,
    rgba(45,63,255,0)   100%);
}

/* Ring alphas differ per theme ON PURPOSE. Equal alpha does not
   read as equal strength across light and dark grounds.
   The field centres at 18% 42%; a band that sets --rings-at moves
   it (the Swap screen's hero centres it, as noctis.zone's does). */
.ns-rings {
  position: absolute; inset: 0;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.9), rgba(0,0,0,0) 88%);
          mask-image: linear-gradient(180deg, rgba(0,0,0,.9), rgba(0,0,0,0) 88%);
}
[data-theme="degen"] .ns-rings {
  background-image: repeating-radial-gradient(circle at var(--rings-at, 18% 42%),
    transparent 0 26px, rgba(255,47,176,.20) 26px 27px);
}
[data-theme="dark"] .ns-rings {
  background-image: repeating-radial-gradient(circle at var(--rings-at, 18% 42%),
    transparent 0 26px, rgba(120,133,255,.16) 26px 27px);
}
[data-theme="light"] .ns-rings {
  background-image: repeating-radial-gradient(circle at var(--rings-at, 18% 42%),
    transparent 0 26px, rgba(60,66,76,.16) 26px 27px);
}

/* ---- shared content measure -------------------------------- */
/* Header band inner column and body column must use the SAME
   rule or the kicker jogs sideways between pages.
   Noctis Swap uses 96% (noctis.zone uses 92%) — the DEX is
   data-dense and needs the extra width for its tables. */
.ns-measure {
  max-width: clamp(1180px, 96%, 2000px);
  margin-inline: auto;
}