/* =========================================================================
   QuickPay Payment Design System — Design Tokens
   -------------------------------------------------------------------------
   The single source of truth for color, surface, type, radius, shadow and
   focus values used by the Stripe-inspired payment UIs. Frontpoint green is
   the deliberate primary.

   Token namespace: --cy-*  (cy = checkout)
   Green values mirror the shared util.Blazor stylesheet
   (--fp-green-primary / -darken / -lighten) and the MudBlazor theme primary.

   Defined on :root so any page can consume them. They render nothing on
   their own — page-level scoping (e.g. the .cybs-page light surface) lives
   in patterns.css.
   ========================================================================= */
:root {
    /* ---- Brand / primary ------------------------------------------------ */
    --cy-primary: #35823c;          /* --fp-green-primary */
    --cy-primary-strong: #2a6a32;   /* --fp-green-darken  */
    --cy-primary-bright: #3fb248;   /* accent / gradient stop */

    /* ---- Primary tints (use for fills, rings, hovers) ------------------- */
    --cy-tint-06: rgba(53, 130, 60, 0.06);
    --cy-tint-10: rgba(53, 130, 60, 0.10);
    --cy-tint-14: rgba(53, 130, 60, 0.14);

    /* ---- Neutral (waiting, blocked, timed out — nothing is broken) ------ */
    --cy-neutral-tint: #eef2ef;

    /* ---- Danger (blocking errors, destructive actions) ------------------ */
    --cy-danger: #c0392b;
    --cy-danger-text: #a02020;
    --cy-danger-tint: #fdecec;
    --cy-danger-border: #f5c2c2;

    /* ---- Info (a constraint to know about, not a fault) ------------------ */
    /* Deliberately not the brand green and not the danger red: telling a customer
       that a bank account cannot pay a past-due balance is neither good news nor
       something they did wrong. */
    --cy-info: #1f4d86;
    --cy-info-text: #1c3a5e;
    --cy-info-tint: #eef3fb;
    --cy-info-border: #cddcf1;

    /* ---- Surfaces & borders -------------------------------------------- */
    --cy-surface: #ffffff;
    --cy-border: #e7ebe8;
    --cy-border-strong: #d6ded8;

    /* ---- Text ----------------------------------------------------------- */
    --cy-text: #16241c;
    --cy-text-muted: #5d6b62;
    --cy-text-faint: #8a968e;

    /* ---- Radius --------------------------------------------------------- */
    --cy-radius: 16px;
    --cy-radius-sm: 11px;

    /* ---- Elevation ------------------------------------------------------ */
    --cy-shadow-sm: 0 1px 2px rgba(16, 40, 28, 0.05), 0 2px 6px rgba(16, 40, 28, 0.05);
    --cy-shadow-md: 0 18px 44px -26px rgba(16, 40, 28, 0.42);

    /* ---- Focus ring ----------------------------------------------------- */
    --cy-ring: 0 0 0 3px var(--cy-tint-14);

    /* ---- Type ----------------------------------------------------------- */
    --cy-font: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --cy-font-mono: 'JetBrains Mono', Consolas, 'Courier New', monospace;
}