/*
Theme Name:        NovAI
Theme URI:         https://themeforest.net/item/novai
Author:            NovAI Team
Author URI:        https://novai.io
Description:       NovAI is a purpose-built WordPress theme for AI SaaS products, AI tools, micro-SaaS launches, and AI startup landing pages. Dark-mode first, blazing fast, Gutenberg-native, and conversion-optimized. Built for founders who want to ship a beautiful AI product site in under 2 hours.
Version:           1.0.0
Requires at least: 6.0
Tested up to:      6.7
Requires PHP:      8.0
License:           GNU General Public License v2 or later
License URI:       https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:       novai
Tags:              ai, saas, dark-mode, one-page, full-width-template, custom-colors, custom-logo, custom-menu, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready, block-styles, wide-blocks

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

/* =============================================================
   CSS CUSTOM PROPERTIES — Single source of truth for all values
   ============================================================= */

:root {
    /* --- Dark Mode (Default) Colors --- */
    --color-bg:            #0A0A0F;
    --color-surface:       #111118;
    --color-surface-2:     #16161F;
    --color-border:        #1E1E2E;
    --color-accent:        #6C63FF;
    --color-accent-2:      #00D4FF;
    --color-accent-glow:   rgba(108, 99, 255, 0.25);
    --color-text:          #F0F0F5;
    --color-text-muted:    #8B8B9E;
    --color-text-faint:    #4A4A5E;
    --color-white:         #FFFFFF;
    --color-black:         #000000;
    --color-success:       #22C55E;
    --color-warning:       #F59E0B;
    --color-error:         #EF4444;

    /* --- Gradients --- */
    --gradient-accent:     linear-gradient(135deg, #6C63FF 0%, #00D4FF 100%);
    --gradient-surface:    linear-gradient(180deg, #111118 0%, #0A0A0F 100%);
    --gradient-hero:       radial-gradient(ellipse 80% 60% at 50% -10%, rgba(108,99,255,0.35) 0%, transparent 70%);
    --gradient-glow:       radial-gradient(circle at center, rgba(108,99,255,0.2) 0%, transparent 70%);

    /* --- Typography --- */
    --font-heading:        'Space Grotesk', sans-serif;
    --font-body:           'Inter', sans-serif;
    --font-mono:           'JetBrains Mono', monospace;

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

    --leading-tight:  1.2;
    --leading-snug:   1.35;
    --leading-normal: 1.6;
    --leading-relaxed: 1.75;

    --font-light:   300;
    --font-normal:  400;
    --font-medium:  500;
    --font-semi:    600;
    --font-bold:    700;

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

    --section-pad-desktop: 6.25rem; /* 100px */
    --section-pad-mobile:  3.75rem; /* 60px  */

    /* --- Border Radius --- */
    --radius-sm:   4px;
    --radius-md:   8px;
    --radius-lg:   16px;
    --radius-xl:   24px;
    --radius-full: 9999px;

    /* --- Shadows --- */
    --shadow-sm:   0 1px 3px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3);
    --shadow-md:   0 4px 16px rgba(0,0,0,0.5), 0 2px 6px rgba(0,0,0,0.3);
    --shadow-lg:   0 12px 40px rgba(0,0,0,0.6), 0 4px 12px rgba(0,0,0,0.4);
    --shadow-glow: 0 0 40px rgba(108,99,255,0.3), 0 0 80px rgba(108,99,255,0.15);
    --shadow-card: 0 2px 20px rgba(0,0,0,0.4);

    /* --- Transitions --- */
    --transition-fast:   all 0.15s ease;
    --transition-base:   all 0.3s ease;
    --transition-slow:   all 0.5s ease;
    --transition-bounce: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);

    /* --- Layout --- */
    --container-max:   1280px;
    --container-wide:  1440px;
    --container-narrow: 768px;
    --nav-height:      72px;
    --z-nav:           100;
    --z-modal:         200;
    --z-toast:         300;
}

/* --- Light Mode Overrides --- */
[data-theme="light"] {
    --color-bg:            #FAFAFF;
    --color-surface:       #FFFFFF;
    --color-surface-2:     #F3F3FA;
    --color-border:        #E2E2EE;
    --color-text:          #0A0A0F;
    --color-text-muted:    #5A5A6E;
    --color-text-faint:    #9A9AB0;
    --color-accent-glow:   rgba(108, 99, 255, 0.15);
    --gradient-hero:       radial-gradient(ellipse 80% 60% at 50% -10%, rgba(108,99,255,0.15) 0%, transparent 70%);
    --shadow-sm:           0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.05);
    --shadow-md:           0 4px 16px rgba(0,0,0,0.1), 0 2px 6px rgba(0,0,0,0.07);
    --shadow-lg:           0 12px 40px rgba(0,0,0,0.12), 0 4px 12px rgba(0,0,0,0.08);
    --shadow-card:         0 2px 20px rgba(0,0,0,0.08);
    --gradient-surface:    linear-gradient(180deg, #FFFFFF 0%, #FAFAFF 100%);
}