/* ============================================================
   Design tokens. Custom properties only, no selectors beyond
   :root and the theme blocks.

   The palette: a deep violet night with a magenta glow from the
   right, and cyan to violet to magenta light on key words.

   Two themes. Dark is the default because it is the brand.
   Light keeps the same three hues, deepened so they still pass
   contrast on a pale ground.

   Every colour a component needs lives here, so a component
   never hardcodes a value that only works in one theme.
   ============================================================ */

:root {
  /* ---- surfaces ---- */
  --bg:            #0A0520;
  --bg-2:          #110A2C;
  --card:          #1A1040;
  --card-2:        #22164F;
  --border:        #2C2058;
  --border-glow:   #4A3590;

  /* deeper than --card, used inside browser chrome frames */
  --well:          #0C0722;
  --chrome:        #150D33;
  --chrome-dot:    #3A2C66;

  /* ---- accent: three hues, always in this order ---- */
  --cyan:          #3DD6F5;
  --purple:        #9D5CFF;
  --purple-2:      #7C3AED;
  --pink:          #FF3DB8;

  /* Status mint. The one documented exception to the hue rule,
     kept because this is the section the owner asked to preserve. */
  --live:          #7FE3B0;

  /* ---- type ---- */
  --text:          #F7F4FF;   /* never pure white */
  --muted:         #B7ADD6;
  --muted-2:       #8A7FB0;

  /* ---- gradients ---- */
  --grad:       linear-gradient(100deg, var(--cyan) 0%, var(--purple) 48%, var(--pink) 100%);
  --grad-cool:  linear-gradient(95deg, var(--cyan) 0%, #7B8CFF 55%, var(--purple) 100%);
  --grad-hot:   linear-gradient(95deg, var(--purple) 0%, #D64BEA 45%, var(--pink) 100%);
  /* filled buttons: deep enough that white ink passes contrast */
  --grad-btn:   linear-gradient(100deg, #6D2AE0 0%, #A62BD8 55%, #D0238F 100%);
  --grad-soft:  linear-gradient(135deg, rgba(61,214,245,.14) 0%, rgba(157,92,255,.16) 50%, rgba(255,61,184,.14) 100%);
  --btn-ink:    #FFFFFF;

  /* ---- ambient ground ---- */
  --amb-1:    rgba(124, 58, 237, .42);
  --amb-2:    rgba(255, 61, 184, .30);
  --amb-3:    rgba(61, 214, 245, .12);
  --grain-op: .035;

  /* ---- tints used over imagery ---- */
  --wash:     linear-gradient(150deg, rgba(157,92,255,.30) 0%, rgba(255,61,184,.12) 60%, transparent 100%);
  --scrim:    linear-gradient(180deg, rgba(10,5,32,.06) 0%, rgba(10,5,32,.30) 62%, rgba(10,5,32,.72) 100%);
  --shot-filter: saturate(.85) contrast(1.06) brightness(.9);

  /* ---- elevation and glow ---- */
  --sh-btn:   0 10px 30px rgba(166, 43, 216, .45);
  --sh-btn-h: 0 14px 40px rgba(255, 61, 184, .55);
  --sh-card:  0 24px 70px rgba(0, 0, 0, .45);
  --sh-lift:  0 22px 60px rgba(0, 0, 0, .5), 0 0 0 1px rgba(157, 92, 255, .12), 0 0 44px rgba(157, 92, 255, .22);
  --sh-frame: 0 18px 40px rgba(0, 0, 0, .45);
  --sh-mark:  0 6px 22px rgba(157, 92, 255, .55);

  /* ---- type stack. No webfont: nothing paid, nothing blocking. ---- */
  --font: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono: "SF Mono", "Cascadia Mono", "JetBrains Mono", Consolas, "Liberation Mono", monospace;

  /* ---- scale ---- */
  --step--1: clamp(12.5px, 0.35vw + 11.5px, 14px);
  --step-0:  clamp(15px,   0.35vw + 14px,   16.5px);
  --step-1:  clamp(18px,   0.6vw  + 16.5px, 21px);
  --step-2:  clamp(22px,   1.1vw  + 19px,   28px);
  --step-3:  clamp(26px,   1.8vw  + 20px,   34px);
  --step-4:  clamp(29px,   2.6vw  + 18px,   46px);
  --step-5:  clamp(33px,   3.1vw  + 20px,   56px);

  /* ---- rhythm ---- */
  --gutter:     clamp(20px, 4vw, 40px);
  --max:        1180px;
  --max-narrow: 720px;
  --sec-y:      clamp(74px, 9vw, 130px);

  /* ---- radii ---- */
  --r-chip: 11px;
  --r-btn:  12px;
  --r-tile: 16px;
  --r-card: 18px;
  --r-feat: 22px;

  /* ---- motion. One easing family. ---- */
  --ease:     cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --t-fast:   .16s;
  --t-med:    .28s;
  --t-slow:   .6s;

  /* ---- fixed heights, reserved so layout shift stays at zero ---- */
  --nav-h:     64px;
  --marquee-h: 232px;

  color-scheme: dark;
}

/* ============================================================
   Light theme.
   The same three hues, pulled deeper: bright cyan and hot pink
   both vanish on a pale ground at their dark theme values.
   ============================================================ */

:root[data-theme="light"] {
  --bg:            #FAF7FF;
  --bg-2:          #F2ECFD;
  --card:          #FFFFFF;
  --card-2:        #F7F3FE;
  --border:        #E3DAF5;
  --border-glow:   #C4B0EE;

  --well:          #F4EFFC;
  --chrome:        #ECE4F9;
  --chrome-dot:    #CDBFE8;

  --cyan:          #0A8FB8;
  --purple:        #6D28D9;
  --purple-2:      #5B21B6;
  --pink:          #C8177E;

  --live:          #0E8F5B;

  --text:          #140B2E;
  --muted:         #54467A;
  --muted-2:       #736596;

  --grad-cool:  linear-gradient(95deg, var(--cyan) 0%, #4F5BD5 55%, var(--purple) 100%);
  --grad-hot:   linear-gradient(95deg, var(--purple) 0%, #A21CAF 45%, var(--pink) 100%);
  --grad-soft:  linear-gradient(135deg, rgba(10,143,184,.08) 0%, rgba(109,40,217,.10) 50%, rgba(200,23,126,.08) 100%);

  --amb-1:    rgba(109, 40, 217, .16);
  --amb-2:    rgba(200, 23, 126, .12);
  --amb-3:    rgba(10, 143, 184, .08);
  --grain-op: .02;

  --wash:     linear-gradient(150deg, rgba(109,40,217,.16) 0%, rgba(200,23,126,.06) 60%, transparent 100%);
  --scrim:    linear-gradient(180deg, rgba(20,11,46,.02) 0%, rgba(20,11,46,.10) 62%, rgba(20,11,46,.30) 100%);
  --shot-filter: saturate(.96) contrast(1.02) brightness(1);

  --sh-btn:   0 10px 26px rgba(109, 40, 217, .30);
  --sh-btn-h: 0 14px 34px rgba(200, 23, 126, .34);
  --sh-card:  0 18px 46px rgba(40, 22, 80, .12);
  --sh-lift:  0 18px 44px rgba(40, 22, 80, .14), 0 0 0 1px rgba(109, 40, 217, .10), 0 0 36px rgba(109, 40, 217, .12);
  --sh-frame: 0 14px 30px rgba(40, 22, 80, .12);
  --sh-mark:  0 6px 18px rgba(109, 40, 217, .32);

  color-scheme: light;
}