/* =========================================================================
   Frontpoint Design System — Fonts
   -------------------------------------------------------------------------
   Hanken Grotesk is the live brand/UI typeface (sign-in, site, all product
   surfaces). JetBrains Mono is used for code/token/monospace payloads.

   Cerebri Sans is Frontpoint's licensed corporate typeface used inside the
   MudBlazor app shell. It is a PAID font with no free webfont, so it is
   SUBSTITUTED here with Hanken Grotesk (the same humanist-grotesque feel).
   Swap in the licensed Cerebri Sans @font-face if you have the files.

   Loaded from Google Fonts so consumers need no binaries.
   ========================================================================= */
@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* =========================================================================
   Frontpoint Design System — Color tokens
   -------------------------------------------------------------------------
   Frontpoint green is the deliberate primary across every surface. The
   palette is warm-neutral greens + near-black green ink, kept light and
   airy with green as the single accent.

   Two namespaces, both defined here so any page can consume either:
     --fp-*  brand-level tokens (green scale, neutrals, semantic)
     --cy-*  checkout/payment tokens (mirror of the QuickPay system)
   ========================================================================= */
:root {
    /* ---- Brand green scale --------------------------------------------- */
    --fp-green-50:  #eef6ef;
    --fp-green-100: #d7ebd9;
    --fp-green-200: #aed7b3;
    --fp-green-300: #7cc084;
    --fp-green-400: #3fb248;   /* bright accent / gradient stop */
    --fp-green-500: #35823c;   /* PRIMARY — Frontpoint green */
    --fp-green-600: #2a6a32;   /* hover / active / darken */
    --fp-green-700: #235829;
    --fp-green-800: #1a3f1f;
    --fp-green-900: #102818;   /* shadow ink base */

    --fp-green-primary: #35823c;   /* canonical Frontpoint green */
    --fp-green-darken:  #2a6a32;
    --fp-green-lighten: #3fb248;

    /* ---- Primary tints (fills, rings, hovers) -------------------------- */
    --fp-tint-06: rgba(53, 130, 60, 0.06);
    --fp-tint-10: rgba(53, 130, 60, 0.10);
    --fp-tint-14: rgba(53, 130, 60, 0.14);
    --fp-tint-18: rgba(53, 130, 60, 0.18);   /* ::selection */

    /* ---- Ink / text ---------------------------------------------------- */
    --fp-text:        #16241c;   /* primary ink (near-black green) */
    --fp-text-muted:  #5d6b62;   /* secondary */
    --fp-text-faint:  #8a968e;   /* tertiary / placeholder */
    --fp-text-on-green: #ffffff;

    /* ---- Links --------------------------------------------------------- */
    --fp-link:         #2a6a32;   /* green-600 — resting link ink */
    --fp-link-hover:   #235829;   /* green-700 — hover/active darken */
    --fp-link-visited: #1a3f1f;   /* green-800 — visited */
    --fp-link-on-green:#ffffff;   /* links on green / dark panels */

    /* ---- Surfaces & lines ---------------------------------------------- */
    --fp-bg:            #f5f8f6;  /* global app background */
    --fp-bg-sunken:     #e8edea;  /* login body gradient stop */
    --fp-surface:       #ffffff;  /* cards, panels */
    --fp-surface-tint:  #f3f6f4;  /* hover fill on light surfaces */
    --fp-border:        #e7ebe8;  /* hairline */
    --fp-border-strong: #d6ded8;  /* input / control border */
    --fp-footer:        #23272a;  /* dark footer */

    /* ---- Mint accents (on green panels) -------------------------------- */
    --fp-mint:  #aef0b4;   /* check marks on green */
    --fp-mint-2:#5fae66;   /* footer hover / labels */

    /* ---- Semantic: success / warning / danger / info ------------------- */
    --fp-success:        #35823c;
    --fp-success-bg:     var(--fp-tint-10);

    --fp-warning:        #c79215;
    --fp-warning-strong: #7a5a12;
    --fp-warning-bg:     #fff8e8;
    --fp-warning-border: #f3e2b6;

    --fp-danger:         #c0392b;
    --fp-danger-strong:  #a02020;
    --fp-danger-bg:      #fdecec;
    --fp-danger-border:  #f5c2c2;
    --fp-danger-validation: #e50000;   /* form-validation outline */

    --fp-gold:           #ffd27a;   /* review stars */

    /* =====================================================================
       --cy-*  QuickPay / checkout mirror (kept for payment-surface parity)
       ===================================================================== */
    --cy-primary:        var(--fp-green-500);
    --cy-primary-strong: var(--fp-green-600);
    --cy-primary-bright: var(--fp-green-400);
    --cy-tint-06: var(--fp-tint-06);
    --cy-tint-10: var(--fp-tint-10);
    --cy-tint-14: var(--fp-tint-14);
    --cy-surface:       var(--fp-surface);
    --cy-border:        var(--fp-border);
    --cy-border-strong: var(--fp-border-strong);
    --cy-text:       var(--fp-text);
    --cy-text-muted: var(--fp-text-muted);
    --cy-text-faint: var(--fp-text-faint);
}

/* =========================================================================
   Frontpoint Design System — Typography tokens
   -------------------------------------------------------------------------
   Hanken Grotesk powers every surface (display through caption). Tight
   negative tracking on large headings; relaxed line-height on body. Weights
   run 400–800, with 600/650/700 doing most of the UI work. JetBrains Mono
   for code / tokenized payloads.
   ========================================================================= */
:root {
    /* ---- Families ------------------------------------------------------ */
    --fp-font: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    --fp-font-mono: 'JetBrains Mono', Consolas, 'Courier New', monospace;
    /* Cerebri Sans (licensed app font) is substituted with Hanken Grotesk. */
    --fp-font-app: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* ---- Weights ------------------------------------------------------- */
    --fp-weight-regular: 400;
    --fp-weight-medium:  500;
    --fp-weight-semibold:600;
    --fp-weight-bold:    700;
    --fp-weight-extra:   800;

    /* ---- Type scale (rem) ---------------------------------------------- */
    --fp-text-display: 2.2rem;    /* hero headline */
    --fp-text-h1:      1.85rem;   /* page title */
    --fp-text-h2:      1.6rem;    /* section / auth title */
    --fp-text-h3:      1.25rem;   /* sub-section */
    --fp-text-card:    1.05rem;   /* card title */
    --fp-text-body:    0.96rem;   /* default body */
    --fp-text-sm:      0.9rem;    /* secondary body */
    --fp-text-xs:      0.84rem;   /* meta / captions */
    --fp-text-2xs:     0.78rem;   /* fine print, tokens */
    --fp-text-eyebrow: 0.72rem;   /* uppercase eyebrows / labels */

    /* ---- Line heights -------------------------------------------------- */
    --fp-leading-tight: 1.1;
    --fp-leading-snug:  1.3;
    --fp-leading-body:  1.5;

    /* ---- Letter spacing ------------------------------------------------ */
    --fp-tracking-display: -0.025em;  /* headlines */
    --fp-tracking-tight:   -0.01em;   /* card titles */
    --fp-tracking-eyebrow:  0.08em;   /* uppercase labels */
    --fp-tracking-wide:     0.16em;   /* brand eyebrow */
}

/* =========================================================================
   Frontpoint Design System — Spacing, radius, elevation & motion tokens
   -------------------------------------------------------------------------
   Hairline borders + generous radius + layered low-opacity green-tinted
   shadows. No heavy Material drop-shadows. Motion is a quiet 0.32s rise on
   a confident ease-out curve.
   ========================================================================= */
:root {
    /* ---- Spacing scale (rem) — roughly a 4px base ---------------------- */
    --fp-space-1:  0.25rem;   /* 4  */
    --fp-space-2:  0.5rem;    /* 8  */
    --fp-space-3:  0.75rem;   /* 12 */
    --fp-space-4:  1rem;      /* 16 */
    --fp-space-5:  1.25rem;   /* 20 */
    --fp-space-6:  1.5rem;    /* 24 */
    --fp-space-8:  2rem;      /* 32 */
    --fp-space-10: 2.5rem;    /* 40 */
    --fp-space-12: 3rem;      /* 48 */
    --fp-space-14: 3.5rem;    /* 56 */

    /* ---- Radius -------------------------------------------------------- */
    --fp-radius-sm:  8px;     /* chips, brand tiles, icon buttons */
    --fp-radius:     11px;    /* controls, buttons, inputs */
    --fp-radius-md:  16px;    /* cards */
    --fp-radius-lg:  20px;    /* hero / login card */
    --fp-radius-pill: 9999px; /* pills, badges, avatars */

    /* ---- Elevation — layered, green-tinted ----------------------------- */
    --fp-shadow-sm: 0 1px 2px rgba(16, 40, 28, 0.05), 0 2px 6px rgba(16, 40, 28, 0.05);
    --fp-shadow-md: 0 18px 44px -26px rgba(16, 40, 28, 0.42);
    --fp-shadow-lg: 0 22px 54px -30px rgba(16, 40, 28, 0.32);
    --fp-shadow-cta: 0 8px 20px -10px rgba(31, 80, 38, 0.65);     /* primary button */
    --fp-shadow-cta-hover: 0 14px 26px -12px rgba(31, 80, 38, 0.70);
    --fp-shadow-cta-danger: 0 8px 20px -10px rgba(128, 26, 20, 0.55);        /* destructive button */
    --fp-shadow-cta-danger-hover: 0 14px 26px -12px rgba(128, 26, 20, 0.62);

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

    /* ---- Motion -------------------------------------------------------- */
    --fp-ease: cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
    --fp-duration-fast: 0.15s; /* @kind other */
    --fp-duration: 0.32s; /* @kind other */
    --fp-duration-slow: 0.55s; /* @kind other */

    /* ---- Layout -------------------------------------------------------- */
    --fp-shell-max: 1240px;   /* site shell */
    --fp-content-max: 1060px; /* payment shell */
    --fp-narrow-max: 720px;   /* single-column settings */

    /* ---- --cy-* mirror ------------------------------------------------- */
    --cy-radius:    16px;
    --cy-radius-sm: 11px;
    --cy-shadow-sm: var(--fp-shadow-sm);
    --cy-shadow-md: var(--fp-shadow-md);
    --cy-ring:      var(--fp-ring);
    --cy-font:      var(--fp-font);
    --cy-font-mono: var(--fp-font-mono);
}

/* =========================================================================
   Frontpoint Design System — Base / reset
   -------------------------------------------------------------------------
   Light, airy default surface. Hanken Grotesk everywhere; near-black green
   ink. The brand-green gradient is reserved for deliberate moments (hero
   brand panels, primary CTAs) — never the whole page.
   ========================================================================= */
* {
    box-sizing: border-box;
}

html,
body {
    height: 100%;
}

body {
    margin: 0;
    font-family: var(--fp-font);
    color: var(--fp-text);
    background: var(--fp-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

::selection {
    background: var(--fp-tint-18);
}

/* =========================================================================
   Links
   -------------------------------------------------------------------------
   Two treatments, both Frontpoint green:
   • Inline link (.fp-link / bare <a> in prose) — underlined, 3px offset.
   • Action link (.fp-linkbtn) — standalone CTA, no underline, hover pill fill.
   On green / dark panels links go white + underlined.
   ========================================================================= */
a,
.fp-link {
    color: var(--fp-link);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    font-weight: 600;
    transition: color var(--fp-duration-fast) var(--fp-ease);
}

a:hover,
.fp-link:hover {
    color: var(--fp-link-hover);
}

a:visited,
.fp-link:visited {
    color: var(--fp-link-visited);
}

a:focus-visible,
.fp-link:focus-visible {
    outline: 2px solid var(--fp-link);
    outline-offset: 2px;
    border-radius: 3px;
}

/* Standalone / action link — reads like a button, no rule. */
.fp-linkbtn {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    color: var(--fp-link);
    font-family: var(--fp-font);
    font-weight: 600;
    text-decoration: none;
    padding: 0.3rem 0.45rem;
    border-radius: 6px;
    background: none;
    border: none;
    cursor: pointer;
    transition: background var(--fp-duration-fast) var(--fp-ease),
                color var(--fp-duration-fast) var(--fp-ease);
}

.fp-linkbtn:hover {
    color: var(--fp-link-hover);
    background: var(--fp-tint-06);
    text-decoration: none;
}

/* On green / dark surfaces. */
.fp-on-green a,
.fp-on-green .fp-link,
a.fp-link-on-green {
    color: var(--fp-link-on-green);
}

.fp-on-green a:hover,
.fp-on-green .fp-link:hover,
a.fp-link-on-green:hover {
    color: var(--fp-mint);
}

/* Page-load rise used by brand panels and cards. */
@keyframes fpRise {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Button loading — an SVG stroke that traces the button's true perimeter.
   pathLength="100" normalizes the dash so it travels at constant linear speed,
   so it doesn't accelerate around the corners. */
@keyframes fpBorderTrace {
    to { stroke-dashoffset: -100; }
}

/* Reduced-motion fallback for the loading trace — a gentle fade, no travel,
   so the loading state still signals activity without vestibular motion. */
@keyframes fpRingPulse {
    0%, 100% { opacity: 0.9; }
    50%      { opacity: 0.25; }
}

/* Indeterminate spinner. */
@keyframes fpSpin { to { transform: rotate(360deg); } }

/* Skeleton shimmer — brand-tinted sheen, never a hard white streak. */
@keyframes fpShimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

.fp-rise {
    animation: fpRise var(--fp-duration-slow) var(--fp-ease) both;
}

@media (prefers-reduced-motion: reduce) {
    .fp-rise,
    .fp-stagger > * {
        animation: none !important;
    }
    /* Keep loading feedback alive — hide the travelling arc, pulse the ring. */
    .fp-btn-trace {
        animation: none !important;
        opacity: 0 !important;
    }
    .fp-btn-ring {
        animation: fpRingPulse 1.6s ease-in-out infinite !important;
    }
    .fp-skeleton {
        animation: none !important;
        background: var(--fp-surface-tint) !important;
    }
    .fp-spinner {
        animation-duration: 1.4s !important;
    }
}