/**
 * =========================================================
 * Letras y Fuentes - Core Design Tokens
 * Version: 2.2.0
 * =========================================================
 *
 * Shared design system for the complete Letras y Fuentes
 * framework.
 *
 * IMPORTANT:
 * - No page-specific styles belong here.
 * - Components should use these variables.
 * - Existing LYF variable names are preserved.
 * - Light / Dark theme tokens are defined here.
 * - Premium Violet + Indigo + Soft Lavender palette.
 * =========================================================
 */

:root {

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

    --lyf-brand-name: "Letras y Fuentes";

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


    /* =====================================================
       BRAND COLORS — PREMIUM VIOLET
       ===================================================== */

    --lyf-color-primary: #635bff;
    --lyf-color-primary-hover: #5145e5;
    --lyf-color-primary-active: #4338ca;

    --lyf-color-primary-soft: #f2f1ff;
    --lyf-color-primary-subtle: #f8f7ff;

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

    --lyf-color-accent: #a855f7;
    --lyf-color-accent-soft: #f7efff;


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

    --lyf-color-text: #292943;
    --lyf-color-text-strong: #17172d;
    --lyf-color-text-muted: #6e7088;
    --lyf-color-text-soft: #9294a9;
    --lyf-color-text-inverse: #ffffff;

    --lyf-color-heading: #19182f;


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

    --lyf-color-background: #f8f9ff;
    --lyf-color-surface: #ffffff;
    --lyf-color-surface-soft: #f3f4fb;
    --lyf-color-surface-muted: #eaeaf5;
    --lyf-color-surface-elevated: #ffffff;


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

    --lyf-color-border: #e4e5f0;
    --lyf-color-border-soft: #eeeff7;
    --lyf-color-border-strong: #d1d3e5;

    --lyf-color-border-hover: #bfc2dc;


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

    --lyf-color-success: #12805c;
    --lyf-color-success-hover: #0e684a;
    --lyf-color-success-contrast: #ffffff;
    --lyf-color-success-soft: #e9f9f1;

    --lyf-color-warning: #a86408;
    --lyf-color-warning-hover: #8b5005;
    --lyf-color-warning-soft: #fff6df;

    --lyf-color-danger: #cf354b;
    --lyf-color-danger-hover: #b5293d;
    --lyf-color-danger-contrast: #ffffff;
    --lyf-color-danger-soft: #fff0f2;

    --lyf-color-info: #3267d5;
    --lyf-color-info-soft: #edf3ff;


    /* =====================================================
       FORM / INTERACTION
       ===================================================== */

    --lyf-color-focus-ring:
        rgba(99, 91, 255, 0.30);

    --lyf-focus-ring:
        var(--lyf-color-focus-ring);

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


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

    /* Primary font for body text, UI, and components */
    --lyf-font-family:
        "Inter",
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    /* Dedicated font for headings */
    --lyf-font-family-heading:
        "Poppins",
        "Inter",
        ui-sans-serif,
        system-ui,
        sans-serif;

    /* Monospace font for code and technical content */
    --lyf-font-family-mono:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Monaco,
        Consolas,
        "Liberation Mono",
        "Courier New",
        monospace;


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


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


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


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

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


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

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


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

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

    --lyf-container-max-width:
        var(--lyf-container-page);

    --lyf-container-padding: 16px;

    --lyf-content-width: 760px;


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

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


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

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

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

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

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

    --lyf-shadow-primary:
        0 14px 34px rgba(99, 91, 255, 0.20);


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

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

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

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


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

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


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

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

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

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

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

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


    /* =====================================================
       ADDITIONAL LEGACY ALIASES
       ===================================================== */

    --lyf-primary-color:
        var(--lyf-color-primary);

    --lyf-primary-hover:
        var(--lyf-color-primary-hover);

    --lyf-button-primary-text:
        var(--lyf-color-primary-contrast);

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

    --lyf-surface-hover:
        var(--lyf-color-surface-hover);

    --lyf-text-primary:
        var(--lyf-color-text);

    --lyf-text-secondary:
        var(--lyf-color-text-muted);

    --lyf-color-text-secondary:
        var(--lyf-color-text-muted);

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

    --lyf-border-hover:
        var(--lyf-color-border-strong);

    --lyf-border-width:
        1px;

    --lyf-border-width-strong:
        2px;

    --lyf-focus-color:
        var(--lyf-color-primary);

    --lyf-danger-color:
        var(--lyf-color-danger);

    --lyf-danger-hover:
        var(--lyf-color-danger-hover);

    --lyf-danger-text:
        var(--lyf-color-danger-contrast);

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

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

}


/* =========================================================
   DARK THEME
   ========================================================= */

[data-theme="dark"] {

    /* -----------------------------------------------------
       BRAND COLORS
       ----------------------------------------------------- */

    --lyf-color-primary: #8b83ff;
    --lyf-color-primary-hover: #a49eff;
    --lyf-color-primary-active: #7569f5;

    --lyf-color-primary-soft: #282444;
    --lyf-color-primary-subtle: #1e1b35;

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

    --lyf-color-accent: #c084fc;
    --lyf-color-accent-soft: #2b1d40;


    /* -----------------------------------------------------
       TEXT
       ----------------------------------------------------- */

    --lyf-color-text: #eeedfa;
    --lyf-color-text-strong: #ffffff;
    --lyf-color-text-muted: #b7b5cd;
    --lyf-color-text-soft: #9290a9;
    --lyf-color-text-inverse: #171426;

    --lyf-color-heading: #f8f7ff;


    /* -----------------------------------------------------
       SURFACE
       ----------------------------------------------------- */

    --lyf-color-background: #0d1020;
    --lyf-color-surface: #15182b;
    --lyf-color-surface-soft: #1b1f35;
    --lyf-color-surface-muted: #242943;
    --lyf-color-surface-elevated: #20243a;


    /* -----------------------------------------------------
       BORDER
       ----------------------------------------------------- */

    --lyf-color-border: #303550;
    --lyf-color-border-soft: #252a41;
    --lyf-color-border-strong: #454b69;

    --lyf-color-border-hover: #596080;


    /* -----------------------------------------------------
       STATUS
       ----------------------------------------------------- */

    --lyf-color-success: #42d6a0;
    --lyf-color-success-hover: #64e5b5;
    --lyf-color-success-contrast: #09251b;
    --lyf-color-success-soft: #15372d;

    --lyf-color-warning: #f2bd65;
    --lyf-color-warning-hover: #ffd18a;
    --lyf-color-warning-soft: #352a19;

    --lyf-color-danger: #ff7d91;
    --lyf-color-danger-hover: #ff9baa;
    --lyf-color-danger-contrast: #2b0a12;
    --lyf-color-danger-soft: #381b27;

    --lyf-color-info: #80aaff;
    --lyf-color-info-soft: #1b2948;


    /* -----------------------------------------------------
       FORM / INTERACTION
       ----------------------------------------------------- */

    --lyf-color-focus-ring:
        rgba(139, 131, 255, 0.38);

    --lyf-focus-ring:
        var(--lyf-color-focus-ring);

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


    /* -----------------------------------------------------
       SHADOWS
       ----------------------------------------------------- */

    --lyf-shadow-xs:
        0 1px 2px rgba(0, 0, 0, 0.25);

    --lyf-shadow-sm:
        0 4px 14px rgba(0, 0, 0, 0.28);

    --lyf-shadow-md:
        0 10px 30px rgba(0, 0, 0, 0.32);

    --lyf-shadow-lg:
        0 18px 50px rgba(0, 0, 0, 0.38);

    --lyf-shadow-primary:
        0 14px 34px rgba(139, 131, 255, 0.24);


    /* -----------------------------------------------------
       LEGACY / COMPATIBILITY
       ----------------------------------------------------- */

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

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

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

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

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

}


/* =========================================================
   SYSTEM DARK MODE
   Applies only when no explicit light theme is selected.
   ========================================================= */

@media (prefers-color-scheme: dark) {

    :root:not([data-theme="light"]) {

        /* BRAND COLORS */

        --lyf-color-primary: #8b83ff;
        --lyf-color-primary-hover: #a49eff;
        --lyf-color-primary-active: #7569f5;

        --lyf-color-primary-soft: #282444;
        --lyf-color-primary-subtle: #1e1b35;

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

        --lyf-color-accent: #c084fc;
        --lyf-color-accent-soft: #2b1d40;


        /* TEXT */

        --lyf-color-text: #eeedfa;
        --lyf-color-text-strong: #ffffff;
        --lyf-color-text-muted: #b7b5cd;
        --lyf-color-text-soft: #9290a9;
        --lyf-color-text-inverse: #171426;

        --lyf-color-heading: #f8f7ff;


        /* SURFACE */

        --lyf-color-background: #0d1020;
        --lyf-color-surface: #15182b;
        --lyf-color-surface-soft: #1b1f35;
        --lyf-color-surface-muted: #242943;
        --lyf-color-surface-elevated: #20243a;


        /* BORDER */

        --lyf-color-border: #303550;
        --lyf-color-border-soft: #252a41;
        --lyf-color-border-strong: #454b69;

        --lyf-color-border-hover: #596080;


        /* STATUS */

        --lyf-color-success: #42d6a0;
        --lyf-color-success-hover: #64e5b5;
        --lyf-color-success-contrast: #09251b;
        --lyf-color-success-soft: #15372d;

        --lyf-color-warning: #f2bd65;
        --lyf-color-warning-hover: #ffd18a;
        --lyf-color-warning-soft: #352a19;

        --lyf-color-danger: #ff7d91;
        --lyf-color-danger-hover: #ff9baa;
        --lyf-color-danger-contrast: #2b0a12;
        --lyf-color-danger-soft: #381b27;

        --lyf-color-info: #80aaff;
        --lyf-color-info-soft: #1b2948;


        /* FORM / INTERACTION */

        --lyf-color-focus-ring:
            rgba(139, 131, 255, 0.38);

        --lyf-focus-ring:
            var(--lyf-color-focus-ring);

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


        /* SHADOWS */

        --lyf-shadow-xs:
            0 1px 2px rgba(0, 0, 0, 0.25);

        --lyf-shadow-sm:
            0 4px 14px rgba(0, 0, 0, 0.28);

        --lyf-shadow-md:
            0 10px 30px rgba(0, 0, 0, 0.32);

        --lyf-shadow-lg:
            0 18px 50px rgba(0, 0, 0, 0.38);

        --lyf-shadow-primary:
            0 14px 34px rgba(139, 131, 255, 0.24);


        /* LEGACY / COMPATIBILITY */

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

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

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

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

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

    }

}