/**
 * 221Buddy Marketing Design Tokens
 * Stripe-inspired design system for marketing pages
 *
 * This file contains all design tokens (variables) for marketing pages:
 * - Color system (gradients, brand colors, semantic colors)
 * - Typography scale (display, headings, body)
 * - Spacing system (sections, content, components)
 * - Shadow system (cards, buttons, elevations)
 * - Animation timings
 *
 * Usage: Import this file before marketing-components.css
 */

:root {
    /* ===== Color System ===== */

    /* Gradient Definitions */
    --mkt-gradient-hero: linear-gradient(135deg, #A960EE 0%, #FF6B9D 50%, #FFC371 100%);
    --mkt-gradient-hero-subtle: linear-gradient(135deg,
        rgba(169, 96, 238, 0.08) 0%,
        rgba(255, 107, 157, 0.08) 50%,
        rgba(255, 195, 113, 0.08) 100%
    );
    --mkt-gradient-blue-cyan: linear-gradient(135deg, #00D4FF 0%, #635BFF 100%);
    --mkt-gradient-purple-pink: linear-gradient(135deg, #A960EE 0%, #FF6B9D 100%);
    --mkt-gradient-dark: linear-gradient(180deg, #0A2540 0%, #051124 100%);

    /* Brand Colors */
    --mkt-primary: #635BFF;
    --mkt-primary-hover: #5449D8;
    --mkt-primary-light: rgba(99, 91, 255, 0.1);

    /* Accent Colors */
    --mkt-accent-purple: #A960EE;
    --mkt-accent-pink: #FF6B9D;
    --mkt-accent-orange: #FFC371;
    --mkt-accent-cyan: #00D4FF;

    /* Neutral Colors */
    --mkt-navy-dark: #0A2540;
    --mkt-navy-medium: #051124;
    --mkt-gray-light: #F6F9FC;
    --mkt-gray-medium: #E3E8EE;
    --mkt-gray-dark: #8898AA;

    /* Text Colors */
    --mkt-text-dark: #0F172A;
    --mkt-text-medium: #425466;
    --mkt-text-light: #697386;
    --mkt-text-navy: #ADBDCC;  /* For dark backgrounds */
    --mkt-text-white: #FFFFFF;

    /* Semantic Colors */
    --mkt-success: #34C759;
    --mkt-success-light: rgba(52, 199, 89, 0.1);
    --mkt-warning: #FF9F0A;
    --mkt-warning-light: rgba(255, 159, 10, 0.1);
    --mkt-danger: #FF3B30;
    --mkt-info: #00D4FF;

    /* ===== Typography Scale ===== */

    /* Font Families */
    --mkt-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --mkt-font-mono: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Courier New", monospace;

    /* Font Sizes - Fluid Marketing Scale (responsive across all screen sizes) */
    /* Uses clamp(min, preferred, max) for smooth scaling */
    --mkt-fs-display: clamp(2rem, 5vw + 1rem, 4rem);          /* 32px - 64px */
    --mkt-fs-h1: clamp(1.75rem, 4vw + 0.5rem, 3rem);          /* 28px - 48px */
    --mkt-fs-h2: clamp(1.5rem, 3vw + 0.5rem, 2.25rem);        /* 24px - 36px */
    --mkt-fs-h3: clamp(1.25rem, 2vw + 0.5rem, 1.75rem);       /* 20px - 28px */
    --mkt-fs-h4: clamp(1.125rem, 1.5vw + 0.25rem, 1.25rem);   /* 18px - 20px */
    --mkt-fs-body-large: clamp(1.125rem, 1.5vw + 0.25rem, 1.25rem);  /* 18px - 20px */
    --mkt-fs-body: clamp(1rem, 0.5vw + 0.75rem, 1.125rem);    /* 16px - 18px */
    --mkt-fs-body-small: 1rem;                                 /* 16px fixed */
    --mkt-fs-eyebrow: 0.75rem;                                 /* 12px fixed */
    --mkt-fs-caption: 0.875rem;                                /* 14px fixed */

    /* Font Weights */
    --mkt-fw-normal: 400;
    --mkt-fw-medium: 500;
    --mkt-fw-semibold: 600;
    --mkt-fw-bold: 700;

    /* Line Heights */
    --mkt-lh-tight: 1.2;
    --mkt-lh-normal: 1.5;
    --mkt-lh-relaxed: 1.7;

    /* Letter Spacing */
    --mkt-ls-tight: -0.02em;
    --mkt-ls-normal: 0;
    --mkt-ls-wide: 0.05em;
    --mkt-ls-wider: 0.08em;

    /* ===== Spacing System ===== */

    /* Fluid Section Spacing (responsive vertical padding) */
    /* Uses clamp(min, preferred, max) for smooth scaling */
    --mkt-space-section: clamp(3.75rem, 10vw, 7.5rem);        /* 60px - 120px */
    --mkt-space-section-large: clamp(5rem, 12vw, 10rem);      /* 80px - 160px */
    --mkt-space-section-medium: clamp(3.125rem, 8vw, 6.25rem); /* 50px - 100px */
    --mkt-space-section-small: clamp(2.5rem, 6vw, 5rem);      /* 40px - 80px */

    /* Fluid Content Spacing (between content blocks within sections) */
    --mkt-space-content: clamp(2rem, 5vw, 3.75rem);           /* 32px - 60px */
    --mkt-space-content-large: clamp(2.5rem, 6vw, 5rem);      /* 40px - 80px */
    --mkt-space-content-small: clamp(1.5rem, 3vw, 2.5rem);    /* 24px - 40px */

    /* Component Spacing */
    --mkt-space-card-padding: 40px;
    --mkt-space-button-padding-x: 32px;
    --mkt-space-button-padding-y: 16px;
    --mkt-space-icon-margin: 24px;

    /* Grid & Layout (fluid widths and gaps) */
    --mkt-max-width-content: 1200px;
    --mkt-max-width-narrow: 800px;
    --mkt-max-width-wide: 1400px;
    --mkt-gap-grid: clamp(2rem, 4vw, 3rem);                   /* 32px - 48px */
    --mkt-gap-feature: clamp(2rem, 5vw, 3.75rem);             /* 32px - 60px */

    /* Base Unit (8px) */
    --mkt-unit: 8px;

    /* ===== Border Radius ===== */
    --mkt-radius-small: 8px;
    --mkt-radius-medium: 12px;
    --mkt-radius-large: 16px;
    --mkt-radius-xlarge: 24px;
    --mkt-radius-pill: 999px;

    /* ===== Shadows ===== */

    /* Card Shadows */
    --mkt-shadow-card: 0 8px 24px rgba(0, 0, 0, 0.08);
    --mkt-shadow-card-hover: 0 12px 32px rgba(0, 0, 0, 0.12);
    --mkt-shadow-card-active: 0 4px 16px rgba(0, 0, 0, 0.06);

    /* Button Shadows */
    --mkt-shadow-button: 0 4px 12px rgba(99, 91, 255, 0.3);
    --mkt-shadow-button-hover: 0 6px 16px rgba(99, 91, 255, 0.4);

    /* Subtle Shadows */
    --mkt-shadow-small: 0 2px 8px rgba(0, 0, 0, 0.04);
    --mkt-shadow-medium: 0 4px 16px rgba(0, 0, 0, 0.08);
    --mkt-shadow-large: 0 16px 48px rgba(0, 0, 0, 0.12);

    /* ===== Component Sizes ===== */

    /* Buttons */
    --mkt-btn-height-large: 56px;
    --mkt-btn-height-medium: 48px;
    --mkt-btn-height-small: 40px;

    /* Icons */
    --mkt-icon-size-small: 24px;
    --mkt-icon-size-medium: 32px;
    --mkt-icon-size-large: 48px;
    --mkt-icon-circle-small: 48px;
    --mkt-icon-circle-medium: 64px;
    --mkt-icon-circle-large: 80px;

    /* ===== Animation Timings ===== */
    --mkt-timing-fast: 0.15s;
    --mkt-timing-normal: 0.3s;
    --mkt-timing-slow: 0.6s;
    --mkt-easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
    --mkt-easing-entrance: cubic-bezier(0, 0, 0.2, 1);
    --mkt-easing-exit: cubic-bezier(0.4, 0, 1, 1);

    /* ===== Z-Index Scale ===== */
    --mkt-z-base: 0;
    --mkt-z-dropdown: 1000;
    --mkt-z-sticky: 1100;
    --mkt-z-fixed: 1200;
    --mkt-z-modal-backdrop: 1300;
    --mkt-z-modal: 1400;
    --mkt-z-tooltip: 1500;
}

/* ===== Responsive Adjustments ===== */
/* Note: Most sizing now uses fluid clamp() values above */
/* These breakpoints adjust only component sizes and layout-specific values */

/* Mobile (< 768px) - Component adjustments */
@media (max-width: 768px) {
    :root {
        /* Component Sizes - Optimize for touch and mobile */
        --mkt-btn-height-large: 3rem;      /* 48px - minimum touch target */
        --mkt-btn-height-medium: 2.75rem;  /* 44px */
        --mkt-space-card-padding: clamp(1.5rem, 4vw, 2.5rem);  /* 24px - 40px */
        --mkt-space-button-padding-x: 1.5rem;  /* 24px */
        --mkt-icon-circle-medium: 3.5rem;  /* 56px */
    }
}