/* =====================================================================
   TOKENS — design variables (brand colors, shadows, radii, fonts)
   ===================================================================== */
:root {
  /* Brand blues */
  --ocean-900: #00263d; /* deep navy */
  --ocean-800: #00263d;
  --ocean-700: #009dff; /* bright blue */
  --ocean-600: #009dff;
  --lagoon: #009dff;
  --lagoon-soft: #ccebff; /* light blue */
  --lagoon-glow: rgba(0, 157, 255, .30);

  /* Brand warm tones */
  --coral: #3d1800; /* deep brown (deducted-amount text) */
  --coral-soft: #ffd9c2; /* light peach */
  --sand: #ffd9c2;
  --sand-deep: #ccebff;

  /* Text & surfaces */
  --ink: #222222;
  --muted: #6b7785;
  --paper: #e5f5ff; /* very light blue (background) */
  --paper-2: #ffffff;

  /* Lines & shadows */
  --line: rgba(0, 38, 61, .12);
  --line-strong: rgba(0, 38, 61, .18);
  --shadow-lg: 0 30px 60px -28px rgba(0, 38, 61, .28);
  --shadow-sm: 0 2px 10px -4px rgba(0, 38, 61, .18);

  /* Radii */
  --r: 4px;

  /* Typography */
  --serif: "Zain", "Trebuchet MS", system-ui, sans-serif; /* headings */
  --sans: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "SF Mono", "Menlo", "Consolas", monospace;
}