/* ===========================
   GLOBAL THEME SYSTEM
   =========================== */

/* Root/Default Theme (Pink) */
:root {
    /* ═══════════════════════════════════════════════════════════
       FOUNDATION THEME VARIABLES
       ─────────────────────────────────────────────────────────
       Core colors, text, backgrounds, borders.
       Semantic tokens (below) derive from these.
       ═══════════════════════════════════════════════════════════ */
    /* Core Colors - Pink as default */
    --primary-blue: #f00c71;
    --primary-green: #ff4d94;
    --primary-yellow: #fbbc04;
    --primary-red: #ea4335;
    /* Text Colors */
    --text-primary: #1a1f2e;
    --text-secondary: #5f6368;
    --text-tertiary: #9aa0a6;
    --text-heading: #2c3e50;
    /* Background Colors */
    --background-primary: #ffffff;
    --background-secondary: #f8f9fa;
    --background-tertiary: #f1f3f4;
    /* Border Colors */
    --border-color: #e8eaed;
    --border-strong: #d0d5dd;
    /* Pink Theme Specific (Default) */
    --gradient-primary: linear-gradient(135deg, #f00c71 0%, #f31670c4 100%);
    --gradient-button: linear-gradient(135deg, #f00c71 0%, #d60562 100%);
    --color-accent-1: #f00c71;
    --color-accent-2: #ff4d94;
    --color-accent-3: #ffa1c9;
    --card-bg-subtle: rgba(240, 12, 113, 0.02);
    --shadow-color: rgba(240, 12, 113, 0.15);
    --shadow-color-light: rgba(240, 12, 113, 0.08);
    /* For RGBA backgrounds in navigation */
    --bg-rgb: 255, 255, 255;
    /* Legacy success/error/warning/neutral (kept for backward compat) */
    --color-success: #228b22;
    --color-success-light: #2d9f2d;
    --color-success-dark: #1a6f1a;
    --color-success-bg: #eef6ee;
    --color-error: #ea4335;
    --color-warning: #fbbc04;
    --color-neutral: #64748b;
    --color-neutral-dark: #475569;
    /* Font Family */
    --font-family-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    /* Letter Spacing */
    --letter-spacing-tight: -0.02em;
    --letter-spacing-normal: -0.01em;
    /* Interactive Colors */
    --color-interactive: #be185d;
    --color-interactive-hover: #9f1239;
    --color-interactive-light: rgba(236, 72, 153, 0.08);
    --color-interactive-border: rgba(236, 72, 153, 0.25);
    --color-interactive-selection: rgba(236, 72, 153, 0.12);
    /* ═══════════════════════════════════════════════════════════
       SEMANTIC DESIGN TOKENS
       ─────────────────────────────────────────────────────────
       Derived from the foundation variables above.
       Components should reference these tokens, not the
       foundation vars or raw hex values.
       ═══════════════════════════════════════════════════════════ */
    /* ── Brand Accent (derived from theme) ── */
    --accent: var(--color-accent-1);
    --accent-hover: color-mix(in srgb, var(--accent) 82%, #1a1a1a);
    --accent-light: color-mix(in srgb, var(--accent) 40%, white);
    --accent-subtle: color-mix(in srgb, var(--accent) 8%, transparent);
    --accent-border: color-mix(in srgb, var(--accent) 20%, transparent);
    --accent-shadow: color-mix(in srgb, var(--accent) 15%, transparent);
    --accent-deep: color-mix(in srgb, var(--accent) 65%, #1e1e1e);
    /* ── Ink Scale — 7-level text hierarchy (slate) ── */
    --ink: #0f172a;
    --ink-2: #1e293b;
    --ink-3: #334155;
    --ink-4: #475569;
    --ink-5: #64748b;
    --ink-6: #94a3b8;
    --ink-7: #cbd5e1;
    /* ── Surfaces — 3 elevation levels ── */
    --raised: var(--background-primary);
    --surface: var(--background-secondary);
    --backdrop: var(--background-tertiary, #f8fafc);
    /* ── Signature Surface ── the warm page tone everywhere, and a faint
       grid on the surfaces where people create (see .ain-workspace).
       The intake and brainstorming board read these tokens. */
    --ain-surface: #f2efe9;
    --ain-surface-rgb: 242, 239, 233;
    --ain-grid-line: rgba(29, 26, 20, .055);
    --ain-grid-size: 32px;
    --ain-grid: linear-gradient(var(--ain-grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--ain-grid-line) 1px, transparent 1px);
    /* ── Borders — 2 levels ── */
    --border: var(--border-color);
    --border-lt: color-mix(in srgb, var(--border-color) 50%, transparent);
    /* ── Success / Positive / Ready ── */
    --success: #16a34a;
    --success-dark: #15803d;
    --success-surface: #f0fdf4;
    --success-border: #dcfce7;
    /* ── Danger / Negative / Destructive ── */
    --danger: #dc2626;
    --danger-dark: #991b1b;
    --danger-surface: #fef2f2;
    --danger-border: #fecaca;
    /* ── Warning / Attention / Stale ── */
    --warning: #d97706;
    --warning-dark: #b45309;
    --warning-surface: #fffbeb;
    --warning-border: #fde68a;
    --warning-text: #92400e;
    /* ── Info / Neutral-semantic ── */
    --info: #2563eb;
    --info-dark: #1d4ed8;
    --info-surface: #eff6ff;
    --info-border: #bfdbfe;
    /* ── Premium / Upgrade ── Slate glass treatment */
    --premium: #4a5568;
    --premium-dark: #2d3748;
    --premium-light: #718096;
    --premium-surface: rgba(74, 85, 104, 0.06);
    --premium-border: rgba(74, 85, 104, 0.16);
    --premium-text: #2d3748;
    --premium-gold: #c9a84c;
    --premium-gold-light: #f5e4a3;
    /* ── Data Visualization (Competitive Landscape) ── */
    --dv-teal: #0d9488;
    --dv-teal-light: #14b8a6;
    /* ── Score Grade Scale ── 4-level semantic color system
       Maps to grade bands used in opportunity assessment.
       great    (70+, B+ → A+)  warm green — commit
       good     (50–69, B/B−)   muted sage — validate
       moderate (30–49, C+/C)   amber — rethink
       poor     (0–29, D/F)     slate — pivot/kill
       ──────────────────────────────────────────────── */
    --score-great: #16a34a;
    --score-great-vivid: #4ade80;
    --score-good: #5a8a72;
    --score-good-vivid: #88bba0;
    --score-moderate: #d97706;
    --score-moderate-vivid: #fbbf24;
    --score-poor: #94a3b8;
    --score-poor-vivid: #64748b;
    /* ── Score Header — dark surface behind grade rings ── */
    --score-header: #1e1b2e;
    /* ── Typography ── */
    --font: var(--font-family-primary);
    --font-mono: 'SF Mono', ui-monospace, monospace;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    --text-2xs: 0.5625rem;
    --text-xs: 0.625rem;
    --text-sm: 0.75rem;
    --text-base: 0.8125rem;
    --text-md: 0.875rem;
    --text-lg: 1rem;
    --text-xl: 1.125rem;
    --text-2xl: 1.5rem;
    /* ── Border Radius ── */
    --radius-xs: 0.25rem;
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-full: 9999px;
    --radius-pill: var(--radius-full);
    /* ── File-Type Icons (industry standard) ── */
    --file-pptx: #d35230;
    --file-docx: #2b579a;
    --file-pdf: #f40f02;
    --file-xlsx: #217346;
    /* ═══════════════════════════════════════════════════════════
       ON-DARK SCALE
       ─────────────────────────────────────────────────────────
       Text, border, and surface tokens for dark background
       sections (hero, product moment, pricing, footer).
       Derived from landing page patterns.
       ═══════════════════════════════════════════════════════════ */
    /* ── On-Dark Text — 5-level white-alpha hierarchy ── */
    --on-dark: rgba(255, 255, 255, 0.90); /* headings on dark, near-white */
    --on-dark-2: rgba(255, 255, 255, 0.55); /* body text on dark */
    --on-dark-3: rgba(255, 255, 255, 0.40); /* secondary / descriptions */
    --on-dark-4: rgba(255, 255, 255, 0.25); /* muted / footnotes */
    --on-dark-5: rgba(255, 255, 255, 0.15); /* barely visible / separators */
    /* ── On-Dark Borders — 3 levels ── */
    --on-dark-border: rgba(255, 255, 255, 0.08);
    --on-dark-border-lt: rgba(255, 255, 255, 0.04);
    --on-dark-border-strong: rgba(255, 255, 255, 0.12);
    /* ═══════════════════════════════════════════════════════════
       INFRASTRUCTURE TOKENS
       ─────────────────────────────────────────────────────────
       Layout, transitions, and shadows used across components.
       ═══════════════════════════════════════════════════════════ */
    /* ── Layout ── */
    --container-wide: 1200px;
    /* ── Transitions ── */
    --transition-base: 0.25s ease;
    --transition-spring: 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    /* ── Shadows ── */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.12);
    /* ── CTA Gradient (primary action on dark) ── */
    --gradient-cta: linear-gradient(135deg, #f4089b 0%, #c80670 100%);
    /* ── Accent Glow — CTA shadow scale ── */
    --accent-glow-sm: 0 4px 16px rgba(240, 12, 113, 0.2);
    --accent-glow: 0 4px 20px rgba(240, 12, 113, 0.3), 0 0 0 1px rgba(240, 12, 113, 0.1);
    --accent-glow-hover: 0 8px 32px rgba(240, 12, 113, 0.4), 0 0 0 1px rgba(240, 12, 113, 0.15);
    /* ── On-Dark Button Surfaces ── */
    --on-dark-btn-bg: rgba(255, 255, 255, 0.06);
    --on-dark-btn-border: rgba(255, 255, 255, 0.12);
    --on-dark-btn-bg-hover: rgba(255, 255, 255, 0.1);
    --on-dark-btn-border-hover: rgba(255, 255, 255, 0.2);
    --on-dark-btn-text: rgba(255, 255, 255, 0.8);
    /* ─────────────────────────────────────
       END OF DESIGN TOKENS
       ───────────────────────────────────── */
}



/* ===========================
   GLOBAL BASE STYLES
   =========================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    height: 100%;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: var(--text-primary);
    background-color: var(--ain-surface);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Typography Scale */
h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    line-height: 1.2;
    color: var(--text-heading);
    margin-bottom: 1rem;
}

h1 {
    font-size: 2.5rem;
}

h2 {
    font-size: 2rem;
}

h3 {
    font-size: 1.75rem;
}

h4 {
    font-size: 1.5rem;
}

h5 {
    font-size: 1.25rem;
}

h6 {
    font-size: 1rem;
}

p {
    margin-bottom: 1rem;
    color: var(--text-primary);
}

a {
    color: var(--color-accent-1);
    text-decoration: none;
    transition: color 0.2s ease;
}

    a:hover {
        color: var(--color-accent-2);
    }


/* ===========================
   SIGNATURE SURFACE
   =========================== */

/* The grid for creation surfaces: the intake, the brainstorming board,
   idea and concept canvases, empty states and onboarding. Put it on the
   page's container. The body takes the grid too while such an element is
   on the page, so it also shows around the rail. The grid is fixed to the
   window, so every surface that uses it lines up. Reading and utility
   pages keep the plain tone. */
.ain-workspace,
body:has(.ain-workspace) {
    background-color: var(--ain-surface);
    background-image: var(--ain-grid);
    background-size: var(--ain-grid-size) var(--ain-grid-size);
    background-attachment: fixed;
}


/* ===========================
   UTILITY CLASSES
   =========================== */

.container {
    max-width: 1400px;
    margin: 0 auto;
}

.text-center {
    text-align: center;
}

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

.mt-1 {
    margin-top: 0.5rem;
}

.mt-2 {
    margin-top: 1rem;
}

.mt-3 {
    margin-top: 1.5rem;
}

.mt-4 {
    margin-top: 2rem;
}

.mt-5 {
    margin-top: 3rem;
}

.mb-1 {
    margin-bottom: 0.5rem;
}

.mb-2 {
    margin-bottom: 1rem;
}

.mb-3 {
    margin-bottom: 1.5rem;
}

.mb-4 {
    margin-bottom: 2rem;
}

.mb-5 {
    margin-bottom: 3rem;
}

.p-1 {
    padding: 0.5rem;
}

.p-2 {
    padding: 1rem;
}

.p-3 {
    padding: 1.5rem;
}

.p-4 {
    padding: 2rem;
}

.p-5 {
    padding: 3rem;
}


/* ===========================
   GLOBAL BUTTON STYLES
   =========================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    transition: all 0.2s ease;
    cursor: pointer;
    border: none;
}

.btn-primary {
    background: var(--gradient-button);
    color: white;
    box-shadow: 0 4px 14px var(--shadow-color);
}

    .btn-primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px var(--shadow-color);
        color: white;
    }

.btn-secondary {
    background: var(--background-primary);
    color: var(--text-primary);
    border: 2px solid var(--border-color);
}

    .btn-secondary:hover {
        border-color: var(--color-accent-1);
        background: var(--background-secondary);
    }

.btn-ghost {
    background: transparent;
    color: var(--text-secondary);
    border: 2px solid transparent;
}

    .btn-ghost:hover {
        color: var(--text-primary);
    }


/* ===========================
   GLOBAL CARD STYLES
   =========================== */

.card {
    background: var(--background-primary);
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 4px 16px var(--shadow-color-light);
    border: 1px solid var(--border-color);
    transition: all 0.3s ease;
}

    .card:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 24px var(--shadow-color-light);
    }


/* ===========================
   GLOBAL FORM STYLES
   =========================== */

input, textarea, select {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    background: var(--background-primary);
    color: var(--text-primary);
    font-size: 16px;
    transition: all 0.2s ease;
}

    input:focus, textarea:focus, select:focus {
        border-color: var(--color-accent-1);
    }


/* ===========================
   LOADING STATES
   =========================== */

.loading {
    opacity: 0.6;
    pointer-events: none;
    position: relative;
}

.spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: white;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}


/* ===========================
   RESPONSIVE GRID SYSTEM
   =========================== */

.grid {
    display: grid;
    gap: 24px;
}

.grid-cols-2 {
    grid-template-columns: repeat(2, 1fr);
}

.grid-cols-3 {
    grid-template-columns: repeat(3, 1fr);
}

.grid-cols-4 {
    grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 768px) {
    .grid-cols-2,
    .grid-cols-3,
    .grid-cols-4 {
        grid-template-columns: 1fr;
    }
}


/* ===========================
   GLOBAL BEHAVIORS
   =========================== */

/* Selection Colors */
::selection {
    background: rgba(233, 30, 109, 0.2);
    color: inherit;
}

::-moz-selection {
    background: rgba(233, 30, 109, 0.2);
    color: inherit;
}

/* Focus Management */

/* Pointer focus carries no ring; keyboard focus does. */
:focus:not(:focus-visible) {
    outline: none;
}

/* Containers take focus from script, not from the tab order, so neither
   this ring nor the browser's own belongs on them. */
[tabindex="-1"]:focus,
dialog:focus {
    outline: none;
}

/* One ring for everything a keyboard user can reach. Containers that take
   focus from script carry tabindex="-1" and are excluded, so a dialog or a
   reconnect wrapper is not outlined. Any component class selector overrides
   this. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
[contenteditable]:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
    outline: var(--focus-ring-width, 2px) solid var(--focus-ring-color, var(--color-accent-1));
    outline-offset: var(--focus-ring-offset, 2px);
}

/* Remove red borders on badges/labels */
.section-label,
.hero-badge,
[class*="badge"],
[class*="label"] {
    border: none !important;
    outline: none !important;
}

/* Gradient Text Utility */
.gradient-text {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}


/* ===========================
   RESPONSIVE TYPOGRAPHY
   =========================== */

@media (max-width: 768px) {
    h1 {
        font-size: 2rem;
    }

    h2 {
        font-size: 1.75rem;
    }

    h3 {
        font-size: 1.5rem;
    }

    h4 {
        font-size: 1.25rem;
    }

    h5 {
        font-size: 1.125rem;
    }

    h6 {
        font-size: 1rem;
    }

    .container {
        padding: 0 16px;
    }
}


/* ===========================
   BLAZOR RECONNECT MODAL
   =========================== */

#components-reconnect-modal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.7);
    display: none;
}

    #components-reconnect-modal.components-reconnect-show {
        display: flex;
        justify-content: center;
        align-items: center;
    }

.reconnect-content {
    background: white;
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    text-align: center;
    max-width: 400px;
    animation: fadeIn 0.3s ease-out;
}

/* Hide all states by default */
.reconnecting-state,
#components-reconnect-failed,
#components-reconnect-rejected {
    display: none;
}

/* Show the reconnecting state by default when modal is shown */
.components-reconnect-show .reconnecting-state {
    display: block;
}

/* Hide reconnecting state and show failed/rejected when those classes are present */
.components-reconnect-failed .reconnecting-state,
.components-reconnect-rejected .reconnecting-state {
    display: none;
}

.components-reconnect-failed #components-reconnect-failed,
.components-reconnect-rejected #components-reconnect-rejected {
    display: block;
}