/**
 * FEU SEO Toolkit - Design Tokens
 * Based on FEU-SEO.com branding
 * Version: 1.0.0
 */

:root {
    /* ===== Brand Colors ===== */
    --feu-primary: #ED872B;
    --feu-primary-hover: #d97a25;
    --feu-button: #FF7425;
    --feu-button-hover: #e66820;
    --feu-button-active: #cc5c1c;

    /* ===== Background Colors ===== */
    --feu-bg-dark: #181818;
    --feu-bg-soft: #222222;
    --feu-bg-mute: #282828;
    --feu-bg-surface: #2c2c2c;
    --feu-bg-elevated: #333333;
    --feu-bg-hover: #303030;

    /* ===== Text Colors ===== */
    --feu-text-primary: #ffffff;
    --feu-text-secondary: rgba(235, 235, 235, 0.64);
    --feu-text-muted: rgba(235, 235, 235, 0.45);
    --feu-text-on-button: #121212;

    /* ===== Status Colors ===== */
    --feu-success: #67c23a;
    --feu-success-bg: rgba(103, 194, 58, 0.1);
    --feu-success-border: rgba(103, 194, 58, 0.3);
    --feu-error: #f56c6c;
    --feu-error-bg: rgba(245, 108, 108, 0.1);
    --feu-error-border: rgba(245, 108, 108, 0.3);
    --feu-warning: #e6a23c;
    --feu-warning-bg: rgba(230, 162, 60, 0.1);
    --feu-warning-border: rgba(230, 162, 60, 0.3);
    --feu-info: #909399;
    --feu-info-bg: rgba(144, 147, 153, 0.1);

    /* ===== Border Colors ===== */
    --feu-border: rgba(84, 84, 84, 0.48);
    --feu-border-hover: rgba(84, 84, 84, 0.65);
    --feu-border-focus: #FF7425;

    /* ===== Typography ===== */
    --feu-font-header: 'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --feu-font-body: 'AR One Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --feu-font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

    /* Font Sizes */
    --feu-text-xs: 12px;
    --feu-text-sm: 14px;
    --feu-text-base: 16px;
    --feu-text-lg: 18px;
    --feu-text-xl: 20px;
    --feu-text-2xl: 24px;
    --feu-text-3xl: 30px;

    /* Line Heights */
    --feu-leading-tight: 1.25;
    --feu-leading-normal: 1.5;
    --feu-leading-relaxed: 1.765;

    /* Font Weights */
    --feu-font-normal: 400;
    --feu-font-medium: 500;
    --feu-font-semibold: 600;
    --feu-font-bold: 700;

    /* ===== Spacing ===== */
    --feu-space-xs: 4px;
    --feu-space-sm: 8px;
    --feu-space-md: 16px;
    --feu-space-lg: 24px;
    --feu-space-xl: 32px;
    --feu-space-2xl: 48px;

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

    /* ===== Shadows ===== */
    --feu-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --feu-shadow-md: 0 4px 8px rgba(0, 0, 0, 0.3);
    --feu-shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.4);
    --feu-shadow-xl: 0 12px 24px rgba(0, 0, 0, 0.5);

    /* ===== Transitions ===== */
    --feu-transition-fast: 150ms ease;
    --feu-transition-normal: 250ms ease;
    --feu-transition-slow: 350ms ease;

    /* ===== Z-Index Scale ===== */
    --feu-z-base: 1;
    --feu-z-dropdown: 100;
    --feu-z-sticky: 500;
    --feu-z-modal: 1000;
    --feu-z-toast: 2000;

    /* ===== Container ===== */
    --feu-container-max: 1200px;
}