/*
Theme Name: Vålt
Theme URI: https://vålt.se
Author: Vålt
Author URI: https://vålt.se
Description: A modern WordPress theme for Vålt - charging infrastructure solutions. Features a modular component library and ACF-powered page builder.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.4
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: valt
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready, block-patterns, full-site-editing
*/

/* ============================================================================
   GLOBAL CSS VARIABLES
   Vålt Component Library
   ============================================================================ */

:root,
.bright {
    /* ========================================
       LAYOUT (legacy values)
       ======================================== */
    --site-max-width: 1300px;
    --site-width-regular: 1300px;
    --header-height: 80px;
    
    /* Container widths for page builder sections */
    --container-narrow: 720px;
    --container-medium: 860px;
    --container-regular: 1024px;
    --container-wide: 1200px;

    /* ========================================
       SPACING (based on Tailwind's 4px base)
       ======================================== */
    --spacing: 0.25rem; /* 4px base unit */
    
    /* Derived spacing values */
    --spacing-0: 0;
    --spacing-0-5: calc(var(--spacing) * 0.5); /* 2px */
    --spacing-1: calc(var(--spacing) * 1);   /* 4px */
    --spacing-1-5: calc(var(--spacing) * 1.5); /* 6px */
    --spacing-2: calc(var(--spacing) * 2);   /* 8px */
    --spacing-3: calc(var(--spacing) * 3);   /* 12px */
    --spacing-4: calc(var(--spacing) * 4);   /* 16px */
    --spacing-5: calc(var(--spacing) * 5);   /* 20px */
    --spacing-6: calc(var(--spacing) * 6);   /* 24px */
    --spacing-8: calc(var(--spacing) * 8);   /* 32px */
    --spacing-10: calc(var(--spacing) * 10); /* 40px */
    --spacing-12: calc(var(--spacing) * 12); /* 48px */
    --spacing-14: calc(var(--spacing) * 14); /* 56px */
    --spacing-16: calc(var(--spacing) * 16); /* 64px */
    --spacing-20: calc(var(--spacing) * 20); /* 80px */
    --spacing-24: calc(var(--spacing) * 24); /* 96px */

    /* ========================================
       COLORS (semantic naming)
       Values stored as raw RGB numbers for
       composability with variable opacity.
       Usage: rgb(var(--color-name))
       With opacity: rgb(var(--color-name) / 0.5)
       ======================================== */
    /* Primary - legacy accent green */
    --color-primary: 63 235 0;
    --color-primary-hover: 53 201 0;
    --color-primary-active: 45 158 5;
    --color-primary-light: 237 245 230;
    --color-primary-contrast: 4 4 4;

    /* Secondary - CTA green from legacy */
    --color-secondary: 60 93 46;
    --color-secondary-hover: 48 71 46;
    --color-secondary-active: 38 58 36;
    --color-secondary-light: 232 239 229;
    --color-secondary-contrast: 255 255 255;

    /* Success - legacy muted green (not super saturated) */
    --color-success: 80 144 57;
    --color-success-hover: 67 122 47;
    --color-success-light: 233 242 229;
    --color-success-contrast: 255 255 255;

    /* Warning */
    --color-warning: 234 192 34;
    --color-warning-hover: 174 103 64;
    --color-warning-light: 243 225 215;
    --color-warning-contrast: 8 8 8;

    /* Danger - legacy muted red (not super saturated) */
    --color-danger: 209 49 49;
    --color-danger-hover: 184 42 42;
    --color-danger-light: 250 233 233;
    --color-danger-contrast: 255 255 255;

    /* Info */
    --color-info: 111 132 124;
    --color-info-hover: 97 118 111;
    --color-info-light: 238 242 239;
    --color-info-contrast: 8 8 8;

    /* Neutral / UI - green-tinted backgrounds */
    --color-background: 249 250 247;
    --color-surface: 255 255 255;
    --color-surface-alt: 251 252 250;
    --color-border: 220 229 216;
    --color-border-strong: 197 212 190;
    --color-text: 8 8 8;
    --color-text-muted: 74 90 69;
    --color-text-subtle: 122 138 117;

    /* Colors for background-less components (text + borders)
       These switch to dark values in .dark-text mode while keeping backgrounds light */
    --color-text-no-bg: var(--color-text);
    --color-text-muted-no-bg: var(--color-text-muted);
    --color-text-subtle-no-bg: var(--color-text-subtle);
    --color-border-no-bg: var(--color-border);
    --color-border-strong-no-bg: var(--color-border-strong);

    /* ========================================
       GLASSMORPHISM
       ======================================== */
    --blur: 2px;
    --blur-opacity: 0.875;
    --bg-opacity: 1;

    /* ========================================
       TYPOGRAPHY
       ======================================== */
    /* Legacy font family */
    --font-family-base: "Inter", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    --font-family-heading: var(--font-family-base);
    --font-family-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

    /* Font Sizes - static scale */
    --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: 5rem;        /* 80px */

    /* Fluid Font Sizes (legacy scale) - use for hero/display text */
    /* Scales with both vw (70%) and vh (30%) for balanced sizing on wide screens */
    --text-fluid-sm: clamp(1.2rem, 1.1468rem + 0.149vw + 0.0638vh, 1.333rem);
    --text-fluid-base: clamp(1.44rem, 1.3052rem + 0.3773vw + 0.1617vh, 1.7769rem);
    --text-fluid-lg: clamp(1.728rem, 1.4718rem + 0.7174vw + 0.3075vh, 2.3686rem);
    --text-fluid-xl: clamp(2.0736rem, 1.6401rem + 1.2138vw + 0.5202vh, 3.1573rem);
    --text-fluid-2xl: clamp(2.4883rem, 1.8002rem + 1.9269vw + 0.8258vh, 4.2087rem);
    --text-fluid-3xl: clamp(2.986rem, 1.9363rem + 2.9392vw + 1.2596vh, 7rem);

    /* Line Heights */
    --leading-none: 1;
    --leading-tight: 1.25;
    --leading-snug: 1.375;
    --leading-normal: 1.5;
    --leading-relaxed: 1.625;
    --leading-loose: 2;

    /* Font Weights */
    --font-light: 300;
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    
    /* Base letter spacing (can be overridden per font) */
    --letter-spacing-base: 0;

    /* Letter Spacing */
    --tracking-tight: -0.025em;
    --tracking-normal: 0;
    --tracking-wide: 0.05em;

    /* ========================================
       BORDER RADIUS
       ======================================== */
    --radius-none: 0;
    --radius-sm: 0.125rem;   /* 2px */
    --radius-base: 0.3125rem;/* 5px - legacy default */
    --radius-md: 0.375rem;   /* 6px */
    --radius-lg: 0.5rem;     /* 8px */
    --radius-xl: 0.75rem;    /* 12px */
    --radius-2xl: 1rem;      /* 16px */
    --radius-3xl: 1.5rem;    /* 24px */
    --radius-full: 9999px;   /* legacy button-border-radius: 25px uses this for pills */

    /* ========================================
       TRANSITIONS (legacy cubic-bezier)
       ======================================== */
    --easing: cubic-bezier(0.25, 0.1, 0, 1);
    --transition-fast: 150ms var(--easing);
    --transition-base: 200ms var(--easing);
    --transition-slow: 300ms var(--easing);
    --transition-slower: 500ms var(--easing);

    /* ========================================
       Z-INDEX SCALE
       ======================================== */
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-modal-backdrop: 300;
    --z-modal: 400;
    --z-popover: 500;
    --z-tooltip: 600;

    /* ========================================
       REVEAL ANIMATIONS
       ======================================== */
    --reveal-base-delay: 0.1s;      /* Base delay before any reveal starts */
    --reveal-stagger-increment: 0.13s; /* Delay added per item in staggered reveals */
    --reveal-word-stagger: 0.095s;  /* Word-by-word stagger (half of regular) */
}

/* ========================================
   DARK MODE OVERRIDES
   Applied when .dark class is on a parent
   ======================================== */
.dark {
   /* Glassmorphism */
   --blur-opacity: 0.7;

    /* Dark backgrounds with green tint (legacy-inspired) */
    --color-background: 5 22 7;
    --color-surface: 13 28 15;
    --color-surface-alt: 17 40 15;
    --color-border: 42 61 36;
    --color-border-strong: 58 80 50;
    --color-success: 117 200 87;
    --color-text: 241 245 239;
    --color-text-muted: 203 228 198;
    --color-text-subtle: 106 122 101;

    --color-secondary: 156 235 135;
    --color-secondary-hover: 140 184 118;
    --color-secondary-active: 82 144 56;
    --color-secondary-contrast: 4 0 0;
    
    --color-primary-light: 26 48 16;
    --color-secondary-light: 26 66 43;
    --color-success-light: 17 53 0;
    --color-warning-light: 58 48 16;
    --color-danger-light: 58 21 21;
    --color-info-light: 43 53 49;
    --color-info-light: 23 33 29;

    /* Background-less component colors (follow the main colors in full dark mode) */
    --color-text-no-bg: var(--color-text);
    --color-text-muted-no-bg: var(--color-text-muted);
    --color-text-subtle-no-bg: var(--color-text-subtle);
    --color-border-no-bg: var(--color-border);
    --color-border-strong-no-bg: var(--color-border-strong);
}

/* ========================================
   DARK TEXT ONLY MODE
   Inverts text/borders for bg-less components
   while keeping backgrounds in light mode.
   Use for sections with dark background images.
   ======================================== */
.dark-text {
    /* Text colors (dark mode values) */
    --color-text-no-bg: 255 255 255;
    --color-text-muted-no-bg: 255 255 255;
    --color-text-subtle-no-bg: 106 122 101;
    /* Border colors (dark mode values) */
    --color-border-no-bg: 42 61 36;
    --color-border-strong-no-bg: 58 80 50;
}

/* Offset anchor scroll position for fixed header */
html {
    scroll-padding-top: var(--header-height);
}

/* When header is hidden, no scroll offset needed */
html:has(body.hide-header) {
    scroll-padding-top: 0;
}

@media (max-width: 768px) {
   :root {
      /* Faster reveal animations on mobile */
      --reveal-stagger-increment: 0.06s;
   }
}