/* ==========================================================================
   Design tokens
   Dark is the default. [data-theme="light"] overrides only what must change.
   ========================================================================== */

:root{
  /* Surfaces */
  --bg:            #0B0C0E;
  --bg-deep:       #07080A;
  --surface:       #121316;
  --surface-2:     #171A1E;
  --raised:        #1E2126;

  /* Lines */
  --border:        rgba(255,255,255,.10);
  --border-strong: rgba(255,255,255,.20);

  /* Text */
  --text:          #F4F6F7;
  --text-2:        rgba(244,246,247,.68);
  --text-3:        rgba(244,246,247,.46);

  /* Brand */
  --accent:        #4FE3C1;
  --accent-text:   #4FE3C1;
  --accent-ink:    #06231D;
  --accent-soft:   rgba(79,227,193,.12);
  --accent-line:   rgba(79,227,193,.30);
  --accent-glow:   rgba(79,227,193,.22);
  --amber:         #FFB454;
  --violet:        #8B7CF6;

  /* Effects */
  --grid-line:     rgba(255,255,255,.045);
  --noise-opacity: .035;
  --orb-1:         rgba(79,227,193,.22);
  --orb-2:         rgba(139,124,246,.16);
  --orb-3:         rgba(255,180,84,.10);
  --net-line:      79,227,193;

  /* Type */
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas,
          "Liberation Mono", monospace;

  /* Spacing scale */
  --s1:4px;  --s2:8px;  --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px;

  /* Shape */
  --radius:    10px;
  --radius-lg: 16px;
  --radius-xl: 22px;

  /* Measure */
  --container: 1160px;
  --narrow:    720px;
  --gutter:    clamp(20px, 5vw, 48px);

  /* Depth */
  --shadow:    0 1px 2px rgba(0,0,0,.30), 0 4px 14px rgba(0,0,0,.22);
  --shadow-lg: 0 24px 60px -12px rgba(0,0,0,.55), 0 8px 20px rgba(0,0,0,.30);

  /* Motion */
  --fast: 140ms;
  --mid:  260ms;
  --slow: 640ms;
  --ease:      cubic-bezier(.22,1,.36,1);
  --ease-out:  cubic-bezier(.16,1,.3,1);

  color-scheme: dark;
}

[data-theme="light"]{
  --bg:            #F6F7F8;
  --bg-deep:       #FFFFFF;
  --surface:       #FFFFFF;
  --surface-2:     #F1F3F4;
  --raised:        #E9ECEE;

  --border:        rgba(11,12,14,.12);
  --border-strong: rgba(11,12,14,.26);

  --text:          #0B0C0E;
  --text-2:        rgba(11,12,14,.66);
  --text-3:        rgba(11,12,14,.48);

  --accent:        #0FA184;
  --accent-text:   #0A7A64;
  --accent-ink:    #FFFFFF;
  --accent-soft:   rgba(15,161,132,.10);
  --accent-line:   rgba(15,161,132,.32);
  --accent-glow:   rgba(15,161,132,.18);
  --amber:         #B4720C;
  --violet:        #5B4BD6;

  --grid-line:     rgba(11,12,14,.05);
  --noise-opacity: .02;
  --orb-1:         rgba(15,161,132,.16);
  --orb-2:         rgba(91,75,214,.10);
  --orb-3:         rgba(180,114,12,.08);
  --net-line:      15,161,132;

  --shadow:    0 1px 2px rgba(11,12,14,.06), 0 4px 14px rgba(11,12,14,.05);
  --shadow-lg: 0 24px 60px -14px rgba(11,12,14,.16), 0 8px 20px rgba(11,12,14,.07);

  color-scheme: light;
}

/* Light theme: soften the cursor glow so the wave reads on a pale surface.
   Declared last so it overrides the default without touching the block above. */
[data-theme="light"]{
  --accent-glow: rgba(15,161,132,.16);
}