/*
 * Conta Grana — Effects: gradients, shadows, glass, motion
 */

:root {

  /* ── Gradients ───────────────────────────── */
  --cg-gradient:     linear-gradient(135deg, #002699 0%, #1a5ca8 45%, #3AD77E 100%); /* @kind color */
  --cg-gradient-v:   linear-gradient(180deg, #002699 0%, #3AD77E 100%); /* @kind color */
  --cg-gradient-h:   linear-gradient(90deg,  #002699 0%, #3AD77E 100%); /* @kind color */
  --cg-gradient-sub: linear-gradient(135deg, rgba(0,38,153,.09) 0%, rgba(58,215,126,.09) 100%); /* @kind color */
  --btn-gradient:    linear-gradient(135deg, #3AD77E, #22B864); /* @kind color */

  /* ── Shadows (blue-tinted, soft) ─────────── */
  --shadow-card:     0 4px 24px rgba(0,38,153,0.10);
  --shadow-hover:    0 8px 40px rgba(0,38,153,0.18);
  --shadow-green:    0 4px 20px rgba(58,215,126,0.30);
  --shadow-green-lg: 0 8px 28px rgba(58,215,126,0.42);
  --shadow-modal:    0 24px 80px rgba(0,0,0,0.28);
  --shadow-toast:    0 8px 24px rgba(0,0,0,0.25);

  /* ── Focus rings ─────────────────────────── */
  --focus-ring:         0 0 0 3px rgba(0,38,153,0.10);
  --focus-ring-error:   0 0 0 3px rgba(239,68,68,0.10);
  --focus-ring-success: 0 0 0 3px rgba(34,197,94,0.10);

  /* ── Overlays ────────────────────────────── */
  --overlay-bg: rgba(10,15,30,0.55);

  /* ── Motion ──────────────────────────────── */
  --transition-fast:  all .18s ease;     /* @kind other */
  --transition-base:  all .22s ease;     /* @kind other */
  --transition-slow:  all .25s ease;     /* @kind other */
  --transition-modal: all .28s ease-out; /* @kind other */
  --ease-reveal: cubic-bezier(.16,.84,.44,1); /* @kind other */

}

/* ─────────────────────────────────────────────
 * Glass utilities — only on gradient / dark surfaces, never on white.
 * Always pair the fill with a 1px light border.
 * ───────────────────────────────────────────── */
.glass-dark {
  background: var(--glass-dark);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--glass-dark-border);
}
.glass-dark-mid {
  background: var(--glass-dark-mid);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--glass-dark-border);
}