/**
 * ThikiShop.gr Design System Foundation
 * CSS Custom Properties for consistent site-wide styling
 * Created: February 20, 2026 (Phase 3)
 *
 * Usage: Reference these variables in component CSS.
 * Example: color: var(--thk-text-primary);
 *
 * Naming: --thk-{category}-{property}
 * Categories: color, text, bg, border, radius, shadow, space, font
 */

:root {
    /* === Brand Colors === */
    --thk-brand-primary: #2e6bc6;
    --thk-brand-secondary: #1882c0;
    --thk-brand-dark: #1a1a2e;
    --thk-brand-accent: #e74c3c;

    /* === Text Colors === */
    --thk-text-primary: #242424;
    --thk-text-body: #555555;
    --thk-text-secondary: #777777;
    --thk-text-muted: #999999;
    --thk-text-light: #bbbbbb;
    --thk-text-inverse: #ffffff;

    /* === Background Colors === */
    --thk-bg-white: #ffffff;
    --thk-bg-light: #f5f5f5;
    --thk-bg-warm: #fff8f5;
    --thk-bg-gray: #f9fafb;
    --thk-bg-dark: #1a1a2e;

    /* === Border Colors === */
    --thk-border-light: #e5e5e5;
    --thk-border-medium: #e0e0e0;
    --thk-border-dark: #cccccc;

    /* === Spacing Scale (8px base) === */
    --thk-space-xs: 4px;
    --thk-space-sm: 8px;
    --thk-space-md: 16px;
    --thk-space-lg: 24px;
    --thk-space-xl: 32px;
    --thk-space-2xl: 48px;
    --thk-space-3xl: 64px;

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

    /* === Shadows === */
    --thk-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --thk-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.08);
    --thk-shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.12);

    /* === Typography === */
    --thk-font-body: "Inter", Arial, Helvetica, sans-serif;
    --thk-font-display: "Audiowide", -apple-system, BlinkMacSystemFont, sans-serif;
    --thk-font-mono: "Roboto Mono", "Courier New", monospace;

    /* === Transitions === */
    --thk-transition-fast: 150ms ease;
    --thk-transition-normal: 250ms ease;
    --thk-transition-slow: 400ms ease;
}