/* ==========================================================================
   AURIX — base.css
   Design tokens, reset, typography, theme switching, utilities.
   Load order: base.css -> layout.css -> components.css

   DESIGN SYSTEM: "Frost", matching the wallet app.
   Pale blue-white base under a blurred pastel sky (sky blue, peach, mint).
   Content sits on translucent white glass panels with soft coloured
   shadows. Ocean blue is the only action colour; mint means gain or safe;
   peach means attention. Plus Jakarta Sans throughout, with ultra-light
   weights at large sizes, and Geist Mono for anything numeric.
   ========================================================================== */

/* ------------------------------------------------------------------ tokens
   LIGHT is the default theme — Frost is a light design. [data-theme="dark"]
   on <html> overrides it with the night version of the same system. The
   inline script in each page's <head> sets that attribute before paint, so
   there is never a flash of the wrong theme.                              */
:root {
  /* ---- brand gradient: ocean -> periwinkle -> peach
     Mirrors colors.gradient in js/config.js, which feeds the 3D scenes. */
  --g1: #3B7BF7;
  --g2: #7D8BF2;
  --g3: #FFB08A;
  --gradient: linear-gradient(135deg, var(--g1) 0%, var(--g2) 52%, var(--g3) 100%);

  /* ---- named palette (the five colours from the design's legend) */
  --ocean: #2F6BF6;        /* actions */
  --ocean-deep: #1B4FD4;   /* pressed / text on pale fills */
  --mint: #2BC48A;         /* gains, safety */
  --peach: #FF9F7A;        /* alerts, warm accents */
  --sky: #8FBBF2;          /* soft fills */

  /* ---- accent = ocean. Kept under the old names so every component,
     the 3D scenes and the focus ring all follow one switch. */
  --accent: var(--ocean);
  --accent-ink: #FFFFFF;                     /* text ON an accent fill */
  --accent-soft: rgba(47, 107, 246, 0.10);   /* accent as a pale wash */
  --accent-text: #1B4FD4;                    /* accent as readable text */

  /* ---- surfaces
     --card and --glass are deliberately translucent: panels are frosted
     glass floating over the pastel sky, not opaque boxes. Anything using
     them also needs a backdrop-filter — see .card in components.css.   */
  --bg: #EEF3FB;
  --bg-sub: rgba(255, 255, 255, 0.44);
  --card: rgba(255, 255, 255, 0.72);
  --card-2: rgba(255, 255, 255, 0.52);
  --card-solid: #FFFFFF;
  --border: rgba(23, 43, 77, 0.08);
  --border-strong: rgba(23, 43, 77, 0.16);
  --glass: rgba(255, 255, 255, 0.66);
  --glass-border: rgba(255, 255, 255, 0.70);
  --blur: blur(22px) saturate(160%);

  /* ---- text */
  --text: #141821;
  --muted: #5E6A80;
  --ink-invert: #FFFFFF;

  /* ---- status */
  --up: #189E6B;
  --down: #D4654A;

  /* ---- shape: Frost is a soft design, so radii run large */
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 26px;
  --r-xl: 34px;
  --r-pill: 999px;

  /* ---- elevation
     Shadows are tinted, never grey: a blue-grey ambient plus a coloured
     bloom. That is what keeps the panels looking like glass over colour
     instead of paper on a wall.                                       */
  --shadow-sm: 0 2px 10px rgba(29, 56, 110, 0.06),
               0 10px 24px -14px rgba(29, 56, 110, 0.14);
  --shadow-md: 0 2px 10px rgba(29, 56, 110, 0.05),
               0 26px 50px -24px rgba(29, 56, 110, 0.26);
  --shadow-ocean: 0 12px 30px -12px rgba(47, 107, 246, 0.50);
  --shadow-glow: 0 0 70px rgba(143, 187, 242, 0.45);

  /* ---- type */
  --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  /* ---- layout */
  --maxw: 1200px;
  --gutter: 20px;
  --header-h: 68px;

  /* ---- motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --t-fast: 0.18s;
  --t-med: 0.32s;
}

/* ------------------------------------------------------------- dark theme
   Not a different brand — the same Frost system after dark. The sky goes
   deep navy, the glass panels become lightly lit rather than white, and
   the accent lifts a little so it still reads against the darker base.   */
html[data-theme="dark"] {
  --bg: #0A0F1C;
  --bg-sub: rgba(255, 255, 255, 0.035);
  --card: rgba(255, 255, 255, 0.055);
  --card-2: rgba(255, 255, 255, 0.085);
  --card-solid: #131A2B;
  --border: rgba(255, 255, 255, 0.09);
  --border-strong: rgba(255, 255, 255, 0.20);
  --glass: rgba(16, 23, 40, 0.68);
  --glass-border: rgba(255, 255, 255, 0.11);

  --ocean: #5B8DFF;
  --ocean-deep: #87ACFF;
  --accent-ink: #061024;
  --accent-soft: rgba(91, 141, 255, 0.16);
  --accent-text: #9CBBFF;

  --text: #F4F7FD;
  --muted: #8E9BB5;
  --ink-invert: #0A0F1C;

  --up: #43D39B;
  --down: #FF8E73;

  --shadow-sm: 0 2px 12px rgba(0, 0, 0, 0.38);
  --shadow-md: 0 26px 54px -24px rgba(0, 0, 0, 0.72);
  --shadow-ocean: 0 12px 34px -12px rgba(91, 141, 255, 0.46);
  --shadow-glow: 0 0 70px rgba(91, 141, 255, 0.30);
}

/* Wider gutters on bigger screens */
@media (min-width: 768px)  { :root { --gutter: 32px; --header-h: 76px; } }
@media (min-width: 1280px) { :root { --gutter: 48px; } }

/* ------------------------------------------------------------------- reset */
*, *::before, *::after { box-sizing: border-box; }

html {
  /* Lenis drives scrolling; this keeps anchor jumps sane when it's disabled */
  scroll-behavior: auto;
  -webkit-text-size-adjust: 100%;

  /* ---- THE PASTEL SKY -------------------------------------------------
     Four very large, very soft colour fields — sky blue top left, peach
     top right and bottom right, mint bottom left — over the pale base.
     It lives on <html> rather than <body> so one wash covers the whole
     document, and it is fixed so it behaves like a backdrop the frosted
     panels slide over rather than a pattern that scrolls with them.   */
  background-color: var(--bg);
  background-image:
    radial-gradient(64vw 58vw at 4% -8%,  rgba(140, 183, 252, 0.62), transparent 62%),
    radial-gradient(52vw 46vw at 98% 2%,  rgba(255, 201, 175, 0.52), transparent 60%),
    radial-gradient(58vw 54vw at 86% 92%, rgba(255, 186, 154, 0.40), transparent 62%),
    radial-gradient(54vw 50vw at 10% 86%, rgba(150, 229, 199, 0.38), transparent 62%);
  background-attachment: fixed;
  background-repeat: no-repeat;
}

/* After dark the same four fields, far dimmer, over the navy base. */
html[data-theme="dark"] {
  background-image:
    radial-gradient(64vw 58vw at 4% -8%,  rgba(59, 123, 247, 0.26), transparent 62%),
    radial-gradient(52vw 46vw at 98% 2%,  rgba(255, 160, 122, 0.16), transparent 60%),
    radial-gradient(58vw 54vw at 86% 92%, rgba(255, 150, 120, 0.13), transparent 62%),
    radial-gradient(54vw 50vw at 10% 86%, rgba(43, 196, 138, 0.14), transparent 62%);
}

/* A fixed background on a touch device repaints the whole viewport on every
   scroll frame. Let it scroll with the page there instead. */
@media (hover: none) {
  html { background-attachment: scroll; }
}

body {
  margin: 0;
  /* transparent, so the sky painted on <html> shows through */
  background: transparent;
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 450;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;              /* belt-and-braces against stray overflow */
  transition: color var(--t-med) var(--ease);
}

/* Lenis adds .lenis-smooth to <html>; these are the library's required bits */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

img, svg, canvas { display: block; max-width: 100%; }
img { height: auto; }

/* ---------------------------------------------------------------- headings
   Frost headlines are large and LIGHT. The weight climbs as the size falls,
   so a 4rem h1 at 300 and a 1.2rem h3 at 650 read as the same voice.     */
h1, h2, h3, h4 {
  margin: 0 0 0.5em;
  line-height: 1.1;
  letter-spacing: -0.03em;
}
h1 { font-size: clamp(2.4rem, 7.6vw, 4.6rem); font-weight: 300; letter-spacing: -0.042em; }
h2 { font-size: clamp(1.75rem, 4.6vw, 2.9rem); font-weight: 350; letter-spacing: -0.034em; }
h3 { font-size: clamp(1.1rem, 2.4vw, 1.3rem);  font-weight: 650; letter-spacing: -0.018em; }
h4 { font-weight: 650; }
p  { margin: 0 0 1rem; }

strong, b { font-weight: 650; }

a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }

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

/* ------------------------------------------------------------------ numbers
   Every amount, price and figure is set in Geist Mono so columns of digits
   line up and nothing shifts sideways as a live price ticks.            */
.num, .mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
/* Big headline figures are ultra-light, like the balance in the app. */
.num--xl {
  font-weight: 250;
  font-size: clamp(2.2rem, 6vw, 3.2rem);
  line-height: 1.05;
}

/* ------------------------------------------------------- focus visibility */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--ocean);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ------------------------------------------------------------- utilities */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.muted { color: var(--muted); }
.center { text-align: center; }
.nowrap { white-space: nowrap; }

/* The eyebrow is itself a small frosted pill in this design. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 14px 5px 11px;
  border-radius: var(--r-pill);
  background: var(--glass);
  border: 1px solid var(--glass-border);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  box-shadow: var(--shadow-sm);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 18px;
}
.eyebrow::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--ocean);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.lead {
  font-size: clamp(1.02rem, 2.2vw, 1.16rem);
  font-weight: 450;
  color: var(--muted);
  max-width: 56ch;
}

.gradient-text {
  background: var(--gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Screen-reader-only (used for form labels and extra link context) */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Skip link */
.skip-link {
  position: absolute;
  left: 50%; top: 8px;
  transform: translate(-50%, -200%);
  z-index: 300;
  background: var(--ocean);
  color: var(--accent-ink);
  padding: 10px 18px;
  border-radius: var(--r-pill);
  font-weight: 600;
  transition: transform var(--t-fast) var(--ease);
}
.skip-link:focus-visible { transform: translate(-50%, 0); }

/* ------------------------------------------------- scroll reveal (GSAP) */
/* NOTHING is hidden here on purpose.

   An earlier version set 'opacity: 0' on [data-reveal] as soon as JS was
   detected, and relied on js/scroll.js to fade it back in. If that script
   never ran — a 404, a wrong MIME type on the server, a blocked CDN — the
   whole page below the fold stayed invisible forever.

   Instead the resting state is visible, and js/scroll.js uses gsap.from()
   to animate *out of* a hidden state. No GSAP means no animation, but the
   content is always readable. Never add 'opacity: 0' back to this rule. */

/* --------------------------------------------------- reduced motion ------ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}