/* =========================================================================
 * Rhine Finance — brand tokens (canonical)
 * Source of truth shared between rhine.finance (marketing) and
 * app.rhine.finance (dApp). Do not edit downstream copies — edit this file
 * and re-propagate via the @rhine/brand package.
 * ========================================================================= */

:root {
  /* --- Surface scale ----------------------------------------------------- */
  --bg-0: #05080F;                               /* page background          */
  --bg-1: #0A0F1E;                               /* elevated surface         */
  --bg-2: #0F1528;                               /* top surface              */
  --panel:                 rgba(18, 26, 48, 0.55);
  --panel-border:          rgba(0, 229, 255, 0.12);
  --panel-border-strong:   rgba(0, 229, 255, 0.28);

  /* --- Text scale -------------------------------------------------------- */
  --text:       #E6EEF9;                         /* primary text             */
  --text-dim:   #8A97B2;                         /* secondary text           */
  --text-muted: #5C6A86;                         /* tertiary / captions      */

  /* --- Brand accents ----------------------------------------------------- */
  --accent-cyan:  #00E5FF;                       /* primary accent           */
  --accent-glow:  #00A3FF;                       /* mid tone                 */
  --accent-blue:  #0057FF;                       /* deep tone                */
  --accent-light: #7EF3FF;                       /* source / highlight       */

  /* --- Semantic ---------------------------------------------------------- */
  --green:  #00F5A0;                             /* positive                 */
  --red:    #FF5370;                             /* danger                   */
  --yellow: #FFC857;                             /* warning                  */

  /* --- Gradients --------------------------------------------------------- */
  --grad:      linear-gradient(135deg, #00E5FF 0%, #00A3FF 50%, #0057FF 100%);
  --grad-soft: linear-gradient(135deg, rgba(0, 229, 255, 0.15), rgba(0, 87, 255, 0.05));
  --grad-flow: linear-gradient(180deg, #7EF3FF 0%, #00E5FF 35%, #00A3FF 75%, #0057FF 100%);

  /* --- Shape + motion ---------------------------------------------------- */
  --radius: 16px;
  --radius-sm: 10px;
  --radius-lg: 24px;
  --shadow-glow: 0 8px 32px -8px rgba(0, 163, 255, 0.45);

  /* --- Type ramps -------------------------------------------------------- */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
}

/* --- Ambient background used site-wide ----------------------------------- */
.bg-mesh {
  position: fixed; inset: 0; z-index: -3;
  background:
    radial-gradient(1000px 600px at 15% 10%, rgba(0, 229, 255, 0.10), transparent 60%),
    radial-gradient(800px 600px at 85% 20%,  rgba(0, 87, 255, 0.12),  transparent 55%),
    radial-gradient(900px 700px at 50% 100%, rgba(0, 163, 255, 0.08), transparent 60%),
    var(--bg-0);
}

.bg-grid {
  position: fixed; inset: 0; z-index: -2;
  background-image:
    linear-gradient(rgba(0, 229, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 229, 255, 0.04) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
}