/* ==========================================================================
   Glacier — design tokens. Single source of truth.
   Exodus-inspired: near-black violet canvas, a vivid multi-colour aurora,
   friendly geometric type, big rounded shells and soft coloured glows.
   Dark is the default theme.
   ========================================================================== */

:root {
  /* ---- surfaces — near-black, faintly warm/maroon ---- */
  --bg-0: #100608;
  --bg-1: #180A0E;
  --bg-2: #221016;
  --bg-3: #31161E;
  /* Borders on dark are soft light films, not hard lines. */
  --line: rgba(255, 255, 255, .09);

  /* ---- accents (names are historical) ----
     A red family now: --cyan is the scarlet primary; --azure a warm orange;
     --ice a light rose for figures/tags; --deep the crimson that anchors the
     aurora; --teal repurposed as a warm gold so the mesh keeps some range. */
  --cyan:  #FF4D5E;
  --azure: #FF7A3D;
  --ice:   #FFB3BC;
  --deep:  #E11D48;
  --pink:  #FF5C86;
  --teal:  #FF9F43;

  /* Foreground for anything on the vivid accent gradient. */
  --on-accent: #FFFFFF;

  /* ---- text ---- */
  --text:  #FCF0F1;
  --muted: #C6ADB2;
  --faint: #9E8B92;

  /* ---- status ---- */
  --good: #3DE0A0;
  --warn: #FFC24B;
  --bad:  #FF5C6B;

  /* ---- gradients ----
     --grad-accent carries white foreground (buttons, icon tiles) so its stops
     stay deep enough for AA (white ≥ 5:1 across the whole span). --grad-sheen
     is brighter and only ever clips text against the dark canvas. */
  --grad-accent: linear-gradient(135deg, #D62240 0%, #A50E30 100%);
  --grad-sheen:  linear-gradient(108deg, #FF7A5C 0%, #FF5C86 45%, #FFB13D 100%);

  /* ---- glows & shadows — large, soft, coloured ---- */
  --glow-cyan:  0 0 60px -12px rgba(255, 77, 94, .55);
  --glow-azure: 0 0 72px -14px rgba(255, 122, 61, .48);
  --glow-pink:  0 0 72px -14px rgba(255, 92, 134, .45);
  --shadow-1: 0 6px 18px rgba(0, 0, 0, .40);
  --shadow-2: 0 34px 80px -30px rgba(18, 3, 6, .85);
  --shadow-card: 0 26px 64px -34px rgba(20, 3, 8, .9);

  /* ---- washes, derived so they follow the theme ---- */
  --wash-cyan:   color-mix(in srgb, var(--cyan) 12%, transparent);
  --wash-cyan-2: color-mix(in srgb, var(--cyan) 20%, transparent);
  --wash-ice:    rgba(255, 255, 255, .05);
  --scrim:       color-mix(in srgb, var(--bg-0) 68%, transparent);
  --scrim-solid: color-mix(in srgb, var(--bg-0) 95%, transparent);
  --card-top:    rgba(255, 255, 255, .06);
  --card-bottom: rgba(255, 255, 255, .018);
  --grid-line:   transparent;

  /* ---- type ---- */
  --font-display: "Plus Jakarta Sans", system-ui, sans-serif;
  --font-body:    "Inter", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, monospace;

  --fs-display: clamp(2.9rem, 6.6vw, 5.6rem);
  --fs-h2:      clamp(2rem, 4vw, 3.4rem);
  --fs-h3:      1.28rem;
  --fs-lead:    1.16rem;
  --fs-body:    1rem;
  --fs-small:   .94rem;
  --fs-data:    .82rem;
  --fs-micro:   .74rem;

  --tr-display: -0.03em;
  --tr-h2:      -0.022em;
  --tr-eyebrow:  0.02em;
  --tr-micro:    0.06em;

  /* ---- radii — big and rounded ---- */
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 26px;
  --r-xl: 34px;
  --r-pill: 999px;

  /* ---- spacing ---- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 72px; --s-9: 104px;

  /* ---- structure ---- */
  --container: 1200px;
  --header-h: 76px;
  --hairline: 1px;

  /* ---- motion ---- */
  --ease:   cubic-bezier(.22, 1, .36, 1);
  --t-fast: .18s;
  --t-base: .26s;
  --t-slow: .55s;
}

@media (min-width: 1600px) { :root { --container: 1320px; } }
@media (min-width: 2200px) { :root { --container: 1500px; } }
@media (max-width: 1200px) { :root { --container: 100%; } }

/* ==========================================================================
   Light theme — a soft lavender daylight variant.
   Accents are darkened to clear AA as text and behind white button labels.
   ========================================================================== */

:root[data-theme="light"] {
  --bg-0: #FBF1F0;
  --bg-1: #FFFFFF;
  --bg-2: #FEF6F5;
  --bg-3: #F6E5E6;
  --line: rgba(70, 12, 22, .12);

  --cyan:  #D11F3D;
  --azure: #C2410C;
  --ice:   #A81030;
  --deep:  #BE123C;
  --pink:  #C21E5B;
  --teal:  #B45309;

  --text:  #26090F;
  --muted: #6B4A50;
  --faint: #875F66;

  --good: #0E9E6E;
  --warn: #A45B00;
  --bad:  #D11F3D;

  --grad-sheen: linear-gradient(108deg, #C2410C 0%, #D11F3D 45%, #A21042 100%);

  --glow-cyan:  0 0 44px -14px rgba(209, 31, 61, .28);
  --glow-azure: 0 0 56px -16px rgba(194, 65, 12, .22);
  --glow-pink:  0 0 56px -16px rgba(194, 30, 91, .22);
  --shadow-1: 0 6px 18px rgba(90, 25, 35, .10);
  --shadow-2: 0 30px 70px -30px rgba(90, 25, 35, .26);
  --shadow-card: 0 24px 56px -34px rgba(90, 25, 35, .28);

  --wash-ice:    rgba(130, 30, 45, .05);
  --card-top:    #FFFFFF;
  --card-bottom: color-mix(in srgb, var(--bg-2) 92%, transparent);
  --scrim:       color-mix(in srgb, #FFFFFF 76%, transparent);
  --scrim-solid: color-mix(in srgb, #FFFFFF 96%, transparent);
}

/* Applied for the duration of a theme flip only. */
html.theme-anim,
html.theme-anim body,
html.theme-anim body * {
  transition: background-color .4s ease, border-color .4s ease, color .3s ease !important;
}