/* ============================================
   DESIGN TOKENS — Landing / Marketing Pages
   Agentifiq.Web.MVC
   Used by: index.html, pricing.html, features.html
   Load AFTER tailwind.min.css, BEFORE landing.css
   ============================================ */

:root {
    /* === MIDNIGHT PALETTE (dark backgrounds) === */
    --color-midnight-50:  #f0f1f4;
    --color-midnight-100: #d9dbe3;
    --color-midnight-200: #b3b7c7;
    --color-midnight-300: #8d93ab;
    --color-midnight-400: #676f8f;
    --color-midnight-500: #414b73;
    --color-midnight-600: #2e3557;
    --color-midnight-700: #1e2340;
    --color-midnight-800: #121729;
    --color-midnight-900: #0a0e1a;
    --color-midnight-950: #060811;

    /* === ACCENT PALETTE (primary CTA blue — #3394ff) === */
    --color-accent-50:  #eef8ff;
    --color-accent-100: #d9eeff;
    --color-accent-200: #bce2ff;
    --color-accent-300: #8ed0ff;
    --color-accent-400: #59b4ff;
    --color-accent-500: #3394ff;
    --color-accent-600: #1a74f5;
    --color-accent-700: #135ce1;
    --color-accent-800: #164bb6;
    --color-accent-900: #14418f;
    --color-accent:     #3394ff;

    /* === ELECTRIC PALETTE (secondary accent purple — #cc44ff) === */
    --color-electric-50:  #faf0ff;
    --color-electric-100: #f3deff;
    --color-electric-200: #e8bfff;
    --color-electric-300: #d68fff;
    --color-electric-400: #cc44ff;
    --color-electric-500: #b620e0;
    --color-electric:     #cc44ff;

    /* === SEMANTIC ALIASES === */
    --color-bg-page:      var(--color-midnight-950);   /* #060811 */
    --color-bg-surface:   var(--color-midnight-900);   /* #0a0e1a */
    --color-bg-card:      var(--color-midnight-800);   /* #121729 */
    --color-fg-primary:   #ffffff;
    --color-fg-secondary: var(--color-midnight-200);   /* #b3b7c7 */
    --color-fg-muted:     var(--color-midnight-400);   /* #676f8f */
    --color-border:       rgba(255, 255, 255, 0.06);
    --color-border-hover: rgba(255, 255, 255, 0.12);

    /* === GRADIENTS === */
    --gradient-hero:    linear-gradient(135deg, var(--color-accent), var(--color-electric));
    --gradient-hero-bg: linear-gradient(135deg, rgba(51, 148, 255, 0.15), rgba(204, 68, 255, 0.15));
    --gradient-cta:     linear-gradient(135deg, var(--color-accent-600), var(--color-electric-500));

    /* === TYPOGRAPHY === */
    --font-sans:    'Inter', ui-sans-serif, system-ui, sans-serif;
    --font-display: 'Instrument Serif', Georgia, serif;
    --font-logo:    'Outfit', ui-sans-serif, sans-serif;

    --text-display-xl: 5rem;
    --text-display-lg: 4rem;
    --text-display-md: 3rem;
    --text-display-sm: 2.25rem;
    --text-heading:    1.5rem;
    --text-body-lg:    1.125rem;

    /* === GLASSMORPHISM === */
    --glass-bg:      rgba(10, 14, 26, 0.6);
    --glass-blur:    20px;
    --glass-saturate: 1.3;
    --glass-border:  rgba(255, 255, 255, 0.06);
}