/* =========================================================================
   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);

    /* ---- 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: 'Cerebri Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --cy-font-mono: 'JetBrains Mono', Consolas, 'Courier New', monospace;
}