/**
 * =========================================================
 * FancyTextEmoji - Core Design Tokens
 * =========================================================
 *
 * Shared design system for the complete FancyTextEmoji
 * framework.
 *
 * IMPORTANT:
 * - Do not place page-specific styles here.
 * - Components should use these variables.
 * - Existing FEX variable names are preserved.
 * =========================================================
 */

:root {

    /* =====================================================
       BRAND
       ===================================================== */

    --fex-brand-name: "FancyTextEmoji";

    --fex-color-white: #ffffff;
    --fex-color-black: #000000;
    --fex-color-transparent: transparent;


    /* =====================================================
       BRAND COLORS
       ===================================================== */

    --fex-color-primary: #6d5dfc;
    --fex-color-primary-hover: #5b4ae8;
    --fex-color-primary-active: #4938cf;

    --fex-color-primary-soft: #f1efff;
    --fex-color-primary-subtle: #f7f5ff;

    --fex-color-primary-contrast: #ffffff;

    --fex-color-accent: #a855f7;
    --fex-color-accent-soft: #faf5ff;


    /* =====================================================
       TEXT
       ===================================================== */

    --fex-color-text: #25233a;
    --fex-color-text-strong: #151326;
    --fex-color-text-muted: #6f6b82;
    --fex-color-text-soft: #9b97aa;
    --fex-color-text-inverse: #ffffff;

    --fex-color-heading: #17152a;


    /* =====================================================
       SURFACE
       ===================================================== */

    --fex-color-background: #faf9fe;
    --fex-color-surface: #ffffff;
    --fex-color-surface-soft: #f7f6fb;
    --fex-color-surface-muted: #f1eff6;
    --fex-color-surface-elevated: #ffffff;


    /* =====================================================
       BORDER
       ===================================================== */

    --fex-color-border: #e7e4ef;
    --fex-color-border-soft: #efedf5;
    --fex-color-border-strong: #d7d3e2;


    /* =====================================================
       STATUS
       ===================================================== */

    --fex-color-success: #159957;
    --fex-color-success-soft: #ecfdf5;

    --fex-color-warning: #c47a12;
    --fex-color-warning-soft: #fff8e8;

    --fex-color-danger: #dc3f52;
    --fex-color-danger-soft: #fff1f3;

    --fex-color-info: #3977e8;
    --fex-color-info-soft: #eef5ff;


    /* =====================================================
       TYPOGRAPHY
       ===================================================== */

    --fex-font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    --fex-font-family-mono:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Monaco,
        Consolas,
        "Liberation Mono",
        "Courier New",
        monospace;


    --fex-font-size-xs: 12px;
    --fex-font-size-sm: 14px;
    --fex-font-size-md: 16px;
    --fex-font-size-lg: 18px;
    --fex-font-size-xl: 20px;
    --fex-font-size-2xl: 24px;
    --fex-font-size-3xl: 30px;
    --fex-font-size-4xl: 36px;
    --fex-font-size-5xl: 48px;
    --fex-font-size-6xl: 60px;


    --fex-font-weight-normal: 400;
    --fex-font-weight-medium: 500;
    --fex-font-weight-semibold: 600;
    --fex-font-weight-bold: 700;
    --fex-font-weight-extrabold: 800;


    --fex-line-height-none: 1;
    --fex-line-height-tight: 1.2;
    --fex-line-height-snug: 1.35;
    --fex-line-height-normal: 1.5;
    --fex-line-height-relaxed: 1.7;
    --fex-line-height-loose: 1.9;


    --fex-heading-letter-spacing: -0.025em;

    --fex-letter-spacing-tight: -0.04em;
    --fex-letter-spacing-normal: 0;
    --fex-letter-spacing-wide: 0.04em;
    --fex-letter-spacing-wider: 0.08em;


    /* =====================================================
       SPACING
       ===================================================== */

    --fex-space-0: 0;
    --fex-space-1: 4px;
    --fex-space-2: 8px;
    --fex-space-3: 12px;
    --fex-space-4: 16px;
    --fex-space-5: 20px;
    --fex-space-6: 24px;
    --fex-space-7: 28px;
    --fex-space-8: 32px;
    --fex-space-9: 36px;
    --fex-space-10: 40px;
    --fex-space-12: 48px;
    --fex-space-14: 56px;
    --fex-space-16: 64px;
    --fex-space-20: 80px;
    --fex-space-24: 96px;


    /* =====================================================
       CONTAINERS
       ===================================================== */

    --fex-container-xs: 480px;
    --fex-container-sm: 640px;
    --fex-container-md: 768px;
    --fex-container-lg: 960px;
    --fex-container-xl: 1200px;
    --fex-container-2xl: 1400px;
    --fex-container-page: 1200px;


    /* =====================================================
       RADIUS
       ===================================================== */

    --fex-radius-none: 0;
    --fex-radius-sm: 6px;
    --fex-radius-md: 10px;
    --fex-radius-lg: 14px;
    --fex-radius-xl: 18px;
    --fex-radius-2xl: 22px;
    --fex-radius-3xl: 28px;
    --fex-radius-full: 9999px;


    /* =====================================================
       SHADOWS
       ===================================================== */

    --fex-shadow-xs:
        0 1px 2px rgba(27, 23, 48, 0.04);

    --fex-shadow-sm:
        0 4px 12px rgba(27, 23, 48, 0.06);

    --fex-shadow-md:
        0 10px 30px rgba(27, 23, 48, 0.08);

    --fex-shadow-lg:
        0 18px 50px rgba(27, 23, 48, 0.10);

    --fex-shadow-primary:
        0 14px 34px rgba(109, 93, 252, 0.18);


    /* =====================================================
       TRANSITIONS
       ===================================================== */

    --fex-transition-fast:
        120ms ease;

    --fex-transition-normal:
        180ms ease;

    --fex-transition-slow:
        280ms ease;


    /* =====================================================
       Z-INDEX
       ===================================================== */

    --fex-z-base: 1;
    --fex-z-dropdown: 100;
    --fex-z-sticky: 500;
    --fex-z-overlay: 900;
    --fex-z-modal: 1000;
    --fex-z-toast: 1100;


    /* =====================================================
       LEGACY COMPATIBILITY VARIABLES
       ===================================================== */

    --border: var(--fex-color-border);

    --bg:
        var(--fex-color-background);

    --surface:
        var(--fex-color-surface);

    --text:
        var(--fex-color-text);

    --text-muted:
        var(--fex-color-text-muted);


    /* =====================================================
       ADDITIONAL LEGACY ALIASES
       Used by buttons.css / utilities.css / reset.css
       with older short-form variable names.
       ===================================================== */

    --fex-primary-color: var(--fex-color-primary);
    --fex-primary-hover: var(--fex-color-primary-hover);
    --fex-button-primary-text: var(--fex-color-primary-contrast);

    --fex-surface: var(--fex-color-surface);
    --fex-surface-hover: var(--fex-color-surface-soft);

    --fex-text-primary: var(--fex-color-text);
    --fex-text-secondary: var(--fex-color-text-muted);
    --fex-color-text-secondary: var(--fex-color-text-muted);

    --fex-border-color: var(--fex-color-border);
    --fex-border-hover: var(--fex-color-border-strong);
    --fex-border-width: 1px;
    --fex-border-width-strong: 2px;

    --fex-focus-color: var(--fex-color-primary);
    --fex-focus-border: var(--fex-color-primary);

    --fex-danger-color: var(--fex-color-danger);
    --fex-danger-hover: #b91c1c;
    --fex-danger-text: var(--fex-color-white);

    --fex-success-color: var(--fex-color-success);