/**
 * Design tokens — every CSS variable the theme defines, in one file.
 *
 * This is the file to copy into a child theme: enqueue your own stylesheet
 * after "tarjava-theme-tokens" (or just redefine the variables you want) and the
 * whole theme follows, including the WooCommerce screens and the shortcodes.
 *
 * Values here are the FALLBACKS used before JavaScript runs and when a visitor
 * has not chosen a theme. The colour variables are then recomputed per preset
 * by TarjavaTheme\Presets::css_vars() (PHP, before first paint) and js/core/theme.js.
 * Guarantees for each variable are documented in HOOKS.md.
 */

:root {
    --site-main-offset: 100px;
    --hover-surface: var(--content-bg);
    --hover-text: var(--link-hover-color, var(--link-color));
    --filled-bg: var(--bg-gradient-start);
    --filled-bg-hover: var(--bg-gradient-end);
    --filled-text: var(--on-primary, var(--text-color-light));
    /* Interaction system (see "Interaction states" in css/core/theme.css).
       Both are recomputed per preset by Presets::css_vars() and theme.js. */
    --on-primary-hover: #ebeffb;
    --on-primary-wash: rgba(0, 0, 0, 0.2);
    --lift: translateY(-2px);
    --focus-ring-width: 2px;
    --focus-ring-offset: 2px;
    --bg-gradient-start: #3b5bdb;
    --bg-gradient-end: #364fc7;
    --card-bg: #ffffff;
    --card-header-gradient-start: #3b5bdb;
    --card-header-gradient-end: #364fc7;
    --text-color: #212529;
    --text-color-light: #ffffff;
    --text-color-dark: #212529;
    --border-color: #dee2e6;
    --content-bg: #f9f9f9;
    --btn-bg: rgba(255, 255, 255, 0.2);
    --btn-border: rgba(255, 255, 255, 0.3);
    --btn-hover-bg: rgba(255, 255, 255, 0.3);
    --btn-active-bg: rgba(255, 255, 255, 0.4);
    --focus-color: #3b5bdb;
    --shadow-color: rgba(0, 0, 0, 0.2);
    --modal-overlay: rgba(0, 0, 0, 0.5);
    --header-bg: rgba(255, 255, 255, 0.95);
    --input-bg: #ffffff;
    --input-text: #333333;
    --font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --font-size-small: 14px;
    --font-size-large: 18px;
    --font-size-xlarge: 20px;
    --line-height: 1.6;
    --spacing-xs: 5px;
    --spacing-sm: 10px;
    --spacing-md: 15px;
    --border-radius-sm: 6px;
    --border-radius-md: 8px;
    --border-radius-lg: 12px;
    --card-min-width: 300px;
    --card-min-height: 200px;
    --container-max-width: 1200px;
    --success: #1e7e34;
    --success-bg: #e7f7ed;
    --danger: #b32d2e;
    --danger-bg: #fdecea;
    --warning: #ca8a04;
    --color-primary: var(--link-color, var(--focus-color));
    --color-primary-contrast: var(--on-primary, var(--text-color-light));
    --color-bg: var(--content-bg);
    --color-surface: var(--card-bg);
    --color-text: var(--text-color);
    --color-muted: var(--text-muted, var(--text-color));
    --color-border: var(--border-color);
    --radius: var(--border-radius-md);
    --font-heading: var(--font-family);
    --container-width: var(--container-max-width);
    --header-height: 80px;
    --letter-spacing: normal;
    --space-1: 4px;
    --space-2: var(--spacing-xs);
    --space-3: var(--spacing-sm);
    --space-4: var(--spacing-md);
    --space-5: var(--spacing-lg);
    --space-6: var(--spacing-xl);
    --space-8: calc(var(--spacing-xl) * 1.5);
    --sidebar-width: 300px;
    --l-01: color-mix(in oklch, var(--bg-gradient-start), white 12%);
    --l-02: color-mix(in oklch, var(--bg-gradient-start) 85%, var(--bg-gradient-end));
    --l-03: var(--bg-gradient-start);
    --l-04: color-mix(in oklch, var(--bg-gradient-start), var(--bg-gradient-end) 25%);
    --l-05: color-mix(in oklch, var(--bg-gradient-start), var(--bg-gradient-end) 50%);
    --l-06: color-mix(in oklch, var(--bg-gradient-end), black 18%);
    --l-07: color-mix(in oklch, var(--bg-gradient-end), black 5%);
    --l-08: color-mix(in oklch, var(--bg-gradient-start), var(--bg-gradient-end) 65%);
    --l-09: color-mix(in oklch, var(--bg-gradient-end), black 8%);
    --l-10: color-mix(in oklch, var(--bg-gradient-end), black 30%);
    --l-11: color-mix(in oklch, var(--bg-gradient-start), var(--bg-gradient-end) 35%);
    --l-12: color-mix(in oklch, var(--bg-gradient-start), var(--bg-gradient-end) 15%);
    --l-13: color-mix(in oklch, var(--bg-gradient-start), var(--bg-gradient-end) 20%);
    --l-14: color-mix(in oklch, var(--bg-gradient-start), var(--bg-gradient-end) 45%);
    --l-15: color-mix(in oklch, var(--bg-gradient-start), var(--bg-gradient-end) 55%);
    --font-size-base: 15px;
    --spacing-lg: 15px;
    --spacing-xl: 20px;
    --card-min: 250px;
    --card-max: 290px;
}

[data-theme="dark"] {
    --success: #4ade80;
    --success-bg: rgba(74, 222, 128, 0.12);
    --danger: #f87171;
    --danger-bg: rgba(248, 113, 113, 0.12);
    --warning: #fbbf24;
}

/* Large and UHD monitors: archives and shop use more of the width (1200px
   left half the screen empty). Article text keeps its own reading width. */
@media (min-width: 1680px) {
    :root {
        --container-max-width: 1440px;
    }
}

@media (min-width: 2200px) {
    :root {
        --container-max-width: 1760px;
    }
}

/* Card width for every card grid — shop, related products, blog, shortcodes:
   wider screens get more columns, never bigger or smaller cards. */