/* SunX design tokens — single source of truth for the visual language. */

:root {
  /* Surfaces: a graphite ladder, not pure black, so elevation reads without
     resorting to borders everywhere. */
  --bg:            #080A0D;
  --surface-1:     #101318;
  --surface-2:     #171B21;
  --surface-3:     #1E232B;
  --line:          #22272F;
  --line-strong:   #2E343E;

  /* SunX yellow, measured off the supplied logo artwork. The single hero
     accent — everything else stays monochrome so it keeps its punch. */
  --yellow:        #FEF518;
  --yellow-dim:    #D4CE0F;
  --yellow-wash:   rgba(254, 245, 24, 0.10);

  /* Electric blue is reserved for light/technology cues only. */
  --blue:          #0090FF;
  --blue-wash:     rgba(0, 144, 255, 0.12);

  --text:          #FFFFFF;
  --text-2:        #A0A0A0;
  --text-3:        #6B7280;

  --ok:            #34D399;
  --warn:          #FBBF24;

  --r-sm:  10px;
  --r-md:  14px;
  --r-lg:  18px;
  --r-xl:  24px;
  --r-2xl: 32px;
  --r-pill: 999px;

  /* Shadows carry a faint warm tint so cards sit in the same light as the
     product renders rather than looking pasted on. */
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow-md: 0 8px 24px -8px rgba(0,0,0,.7);
  --shadow-lg: 0 24px 64px -16px rgba(0,0,0,.8);
  --glow-yellow: 0 0 60px -12px rgba(254,245,24,.35);
  --glow-blue:   0 0 80px -20px rgba(0,144,255,.45);

  --font-display: 'Unbounded', 'Manrope', system-ui, sans-serif;
  --font-body:    'Manrope', system-ui, -apple-system, sans-serif;

  /* Fluid type — scales with the viewport instead of stepping at breakpoints. */
  --fs-hero:  clamp(2.3rem, 4.9vw, 4.4rem);
  --fs-h2:    clamp(2rem, 4.4vw, 3.6rem);
  --fs-h3:    clamp(1.35rem, 2.2vw, 1.85rem);
  --fs-lead:  clamp(1.02rem, 1.5vw, 1.25rem);
  --fs-body:  1rem;
  --fs-sm:    0.9375rem;
  --fs-xs:    0.8125rem;

  /* One container for the whole site. Two widths meant the header, the
     sections, the FAQ and the consent bar each stopped at a different place,
     which on a wide screen reads as three separate left edges. `--shell-wide`
     is kept as an alias so existing markup does not have to change, but it is
     deliberately the same number. */
  --shell:      1400px;
  --shell-wide: 1400px;
  --gutter:   clamp(1.25rem, 4vw, 3rem);
  /* Distance from the viewport edge to the container's content edge. Anything
     positioned against the window rather than the flow — the back-to-top
     button, the consent bar — uses this so it lands on the same line as the
     text beside it. */
  --edge: max(var(--gutter), calc((100vw - var(--shell)) / 2 + var(--gutter)));
  --section:  clamp(4.5rem, 9vw, 9rem);

  --ease: cubic-bezier(.22, 1, .36, 1);
  --dur:  .45s;
}