/* =============================================================================
   Proofox design tokens
   -----------------------------------------------------------------------------
   Single source of truth for color, type, spacing, and motion. Loaded after
   bootstrap.min.css so these CSS variables are available throughout the site.

   When a designer joins to redesign, they should ONLY edit values here.
   No new component should hard-code colors, fonts, or spacings — pull from
   var(--px-token-name).
   ============================================================================= */

/* --- Font: Inter (loaded from Google Fonts via seo-head.blade.php). ---------- */
/* The brand font for the redesigned site. Variable font, ~30KB woff2, served  */
/* with font-display: swap. Local DM Sans files remain in /front/DM_Sans/ as a */
/* graceful fallback for the rare cases when Google Fonts is unreachable.      */
@font-face {
    font-family: 'DM Sans';
    src: url('../DM_Sans/dm-sans-v15-latin-regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* --- Inter metrics-matched fallback ----------------------------------------- */
/* Lighthouse flagged 0.235 CLS on /seo (and similar elsewhere) because the    */
/* H1 reflows when Inter swaps in over the system fallback. This @font-face    */
/* defines a local Arial-aliased fallback with size-adjust + override metrics  */
/* matching Inter's, so the browser renders fallback text at near-identical    */
/* bounding boxes — the swap becomes invisible and CLS drops to ~0.            */
/* size-adjust 107%      → bumps Arial's x-height to match Inter's            */
/* ascent-override 90%   → matches Inter's ascender ratio                     */
/* descent-override 22%  → matches Inter's descender ratio                    */
/* line-gap-override 0%  → Inter has minimal line-gap                          */
@font-face {
    font-family: 'InterFallback';
    src: local('Arial'), local('Helvetica'), local('sans-serif');
    size-adjust: 107%;
    ascent-override: 90%;
    descent-override: 22%;
    line-gap-override: 0%;
}

:root {
    /* --- Brand color scale ------------------------------------------------- */
    --px-brand-primary:      #6c5ce7;       /* Proofox primary accent (purple) */
    --px-brand-primary-dark: #5a4fcf;
    --px-brand-secondary:    #00cec9;       /* Teal accent */
    --px-brand-gradient:     linear-gradient(135deg, #6c5ce7 0%, #00cec9 100%);

    /* --- Neutral grayscale ------------------------------------------------- */
    --px-gray-900: #0a0e27;                 /* Near-black, primary heading text */
    --px-gray-800: #1a2342;
    --px-gray-700: #2d3748;
    --px-gray-600: #4a5568;
    --px-gray-500: #718096;
    --px-gray-400: #a0aec0;
    --px-gray-300: #cbd5e0;
    --px-gray-200: #e2e8f0;
    --px-gray-100: #f1f5f9;
    --px-gray-50:  #f8fafc;
    --px-white:    #ffffff;

    /* --- Semantic surfaces ------------------------------------------------- */
    --px-bg-page:        var(--px-gray-50);
    --px-bg-surface:     var(--px-white);
    --px-bg-muted:       var(--px-gray-100);
    --px-text-primary:   var(--px-gray-900);
    --px-text-secondary: var(--px-gray-600);
    --px-text-muted:     var(--px-gray-500);
    --px-text-on-brand:  var(--px-white);
    --px-border-subtle:  var(--px-gray-200);
    --px-border-strong:  var(--px-gray-300);

    /* --- State colors ------------------------------------------------------ */
    --px-success: #16a34a;
    --px-danger:  #dc2626;
    --px-warning: #f59e0b;
    --px-info:    #0ea5e9;

    /* --- Typography -------------------------------------------------------- */
    /* Primary: Inter — modern, free (OFL), excellent legibility, used by */
    /* Stripe / GitHub / Linear / OpenAI. Loaded from Google Fonts CDN. */
    /* Fallbacks: DM Sans (existing local), then system-ui chain. */
    /* InterFallback (metrics-matched Arial alias above) sits between Inter
       and the system stack so unstyled-text-while-loading renders at near-
       identical bounding-boxes to Inter — eliminates font-swap CLS. */
    --px-font-sans:    'Inter', 'InterFallback', 'DM Sans', 'DM-Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --px-font-display: var(--px-font-sans);
    --px-font-mono:    'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

    --px-text-xs:    0.75rem;     /* 12px */
    --px-text-sm:    0.875rem;    /* 14px */
    --px-text-base:  1rem;        /* 16px */
    --px-text-lg:    1.125rem;    /* 18px */
    --px-text-xl:    1.25rem;     /* 20px */
    --px-text-2xl:   1.5rem;      /* 24px */
    --px-text-3xl:   1.875rem;    /* 30px */
    --px-text-4xl:   2.25rem;     /* 36px */
    --px-text-5xl:   3rem;        /* 48px */
    --px-text-6xl:   3.75rem;     /* 60px - hero */

    --px-leading-tight:  1.2;
    --px-leading-snug:   1.4;
    --px-leading-normal: 1.6;
    --px-leading-loose:  1.8;

    --px-weight-regular:  400;
    --px-weight-medium:   500;
    --px-weight-semibold: 600;
    --px-weight-bold:     700;

    /* --- Spacing scale (4-px base) ---------------------------------------- */
    --px-space-1:  0.25rem;   /*  4px */
    --px-space-2:  0.5rem;    /*  8px */
    --px-space-3:  0.75rem;   /* 12px */
    --px-space-4:  1rem;      /* 16px */
    --px-space-5:  1.5rem;    /* 24px */
    --px-space-6:  2rem;      /* 32px */
    --px-space-8:  3rem;      /* 48px */
    --px-space-10: 4rem;      /* 64px */
    --px-space-12: 6rem;      /* 96px */
    --px-space-16: 8rem;      /* 128px */

    /* --- Border radius ----------------------------------------------------- */
    --px-radius-sm:   0.25rem;
    --px-radius:      0.5rem;
    --px-radius-md:   0.75rem;
    --px-radius-lg:   1rem;
    --px-radius-xl:   1.5rem;
    --px-radius-full: 9999px;

    /* --- Elevation (shadows) ---------------------------------------------- */
    --px-shadow-sm:   0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --px-shadow:      0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
    --px-shadow-md:   0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    --px-shadow-lg:   0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    --px-shadow-xl:   0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);

    /* --- Motion ------------------------------------------------------------ */
    --px-ease-out:        cubic-bezier(0.16, 1, 0.3, 1);
    --px-ease-in-out:     cubic-bezier(0.65, 0, 0.35, 1);
    --px-duration-fast:   150ms;
    --px-duration:        250ms;
    --px-duration-slow:   400ms;

    /* --- Layout ------------------------------------------------------------ */
    --px-container-sm:   640px;
    --px-container-md:   768px;
    --px-container-lg:   1024px;
    --px-container-xl:   1280px;
    --px-container-2xl:  1440px;

    --px-z-dropdown: 1000;
    --px-z-sticky:   1020;
    --px-z-fixed:    1030;
    --px-z-modal:    1050;
    --px-z-popover:  1060;
    --px-z-toast:    1070;
}

/* =============================================================================
   Apply DM Sans globally — overrides v1's bare "DM-Sans" body rule so bold
   weights resolve to the real font instead of synthetic bold.
   ============================================================================= */
body,
html {
    font-family: var(--px-font-sans);
}

/* =============================================================================
   Accessibility: respect prefers-reduced-motion
   ============================================================================= */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* =============================================================================
   Optional dark-mode tokens (activate later by adding class="theme-dark" on <html>)
   ============================================================================= */
.theme-dark {
    --px-bg-page:        #0a0e27;
    --px-bg-surface:     #1a2342;
    --px-bg-muted:       #2d3748;
    --px-text-primary:   #f8fafc;
    --px-text-secondary: #cbd5e0;
    --px-text-muted:     #a0aec0;
    --px-border-subtle:  #2d3748;
    --px-border-strong:  #4a5568;
}