/* Tipografías */
@import "@fontsource/roboto/300.css";
@import "@fontsource/roboto/400.css";
@import "@fontsource/roboto/500.css";
@import "@fontsource/roboto/700.css";
/* Heading que permite minúsculas (Bebas es all-caps) */
@import "@fontsource/barlow-condensed/500.css";
@import "@fontsource/barlow-condensed/700.css";

/* ========= PALETA / TEMA =========
   Defínelo en BASE (no en THEME) para ganar a site.css */
@layer base {
    :root, :host,
    [data-theme="light"] {
        --brand-orange: #EA3900;
        /* Mapea a las variables que usa DaisyUI */
        --color-primary: var(--brand-orange);
        --color-primary-content: #fff;
        /* (opcional) ajusta contraste base si quieres */
        /* --color-base-100: #fff;
       --color-base-content: #111; */
    }

    [data-theme="dark"] {
        --color-primary: var(--brand-orange);
        --color-primary-content: #fff;
        /* --color-base-100: #101011;
       --color-base-content: #fafafa; */
    }

    /* Tipografías base y headings */
    html, :host, body {
        font-family: "Roboto", ui-sans-serif, system-ui, -apple-system, "Segoe UI","Helvetica Neue", Arial, "Noto Sans";
    }

    :root {
        --font-heading: "Barlow Condensed", system-ui, sans-serif;
    }

    h1, h2, h3, h4, h5, h6, .font-heading {
        font-family: var(--font-heading);
        text-transform: none; /* neutraliza all-caps heredados */
        letter-spacing: .01em;
        line-height: .95;
    }
}

/* ========= UTILIDADES DE MARCA ========= */
@layer utilities {
    .text-brand {
        color: var(--brand-orange);
    }

    .bg-brand {
        background-color: var(--brand-orange);
    }

    .border-brand {
        border-color: var(--brand-orange);
    }

    .ring-brand {
        --tw-ring-color: var(--brand-orange);
    }

    .focus-brand:focus,
    .focus-brand:focus-within {
        border-color: var(--brand-orange);
        outline: 0;
        box-shadow: 0 0 0 3px color-mix(in oklab, var(--brand-orange) 30%, transparent);
    }
}

/* ========= COMPONENTES ========= */
/* Asegura el CTA naranja aunque el tema cambie */
@layer components {
    .btn-primary {
        /* Variables internas que usa DaisyUI en .btn */
        --btn-color: var(--color-primary);
        --btn-fg: var(--color-primary-content);
        /* Fallback directo (por si alguna regla del tema pisa variables) */
        background-color: var(--color-primary) !important;
        color: var(--color-primary-content) !important;
        border-color: color-mix(in oklab, var(--color-primary) 88%, #000) !important;
        transition: background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    }

        .btn-primary:hover {
            background-color: color-mix(in oklab, var(--color-primary) 88%, #000) !important;
            border-color: color-mix(in oklab, var(--color-primary) 78%, #000) !important;
        }

        .btn-primary:focus-visible {
            outline: none;
            box-shadow: 0 0 0 4px color-mix(in oklab, var(--brand-orange) 28%, transparent);
        }

    /* Card suave utilitaria */
    .card-soft {
        border-radius: .75rem;
        border: 1px solid color-mix(in oklab, currentColor 12%, transparent);
        background: var(--color-base-100);
        box-shadow: 0 1px 3px rgba(0,0,0,.05);
    }
}

/* Salvavidas: si algún sitio impone uppercase en headings, lo anulamos también fuera de capas */
h1, h2, h3, h4, h5, h6, .font-heading {
    text-transform: none;
}

/* ===== Marca solo en el header ===== */
@layer components {
    /* Utilidad para texto de marca en la navbar */
    .font-brand {
        font-family: "Bebas Neue", system-ui, sans-serif !important;
        text-transform: uppercase; /* branding en mayúsculas */
        letter-spacing: .02em; /* respirito */
        line-height: 1; /* para alinear con el escudo */
    }

    /* Afinado de tamaños por breakpoint (opcional) */
    .font-brand-sm {
        font-size: 1.25rem;
    }
    /* ~20px */
    @media (min-width: 768px) { /* md */
        .font-brand-sm {
            font-size: 1.5rem;
        }
        /* ~24px */
    }

    /* tamaño un poco mayor para la marca en la navbar */
    .font-brand-lg {
        font-size: 1.6rem; /* ~25–26px */
        line-height: 1;
    }

    @media (min-width: 768px) {
        .font-brand-lg {
            font-size: 1.9rem;
        }
        /* ~30px en pantallas medianas+ */
    }

    /* Que los botones “ghost” no cambien el estilo del logo */
    .navbar .btn-ghost .font-brand {
        text-decoration: none;
    }
}

/* ===== Map DaisyUI primary tokens to brand (light & dark) ===== */
@layer theme {
    /* #EA3900 ≈ hsl(14 100% 46%) */
    :root,
    :host {
        --p: 14 100% 46%;
        --pc: 0 0% 100%;
    }

    [data-theme="dark"] {
        --p: 14 100% 46%;
        --pc: 0 0% 100%;
    }
}
@layer components {
    /* Alta especificidad y !important para blindarlo */
    .btn.btn-primary {
        --btn-color: hsl(var(--p));
        --btn-fg: hsl(var(--pc));
        background-color: hsl(var(--p)) !important;
        color: hsl(var(--pc)) !important;
        border-color: color-mix(in srgb, hsl(var(--p)) 88%, black) !important;
        transition: background-color .15s ease-in-out, border-color .15s ease-in-out;
    }

        .btn.btn-primary:hover {
            background-color: color-mix(in srgb, hsl(var(--p)) 88%, black) !important;
            border-color: color-mix(in srgb, hsl(var(--p)) 78%, black) !important;
        }

        .btn.btn-primary:focus-visible {
            outline: none;
            box-shadow: 0 0 0 4px color-mix(in srgb, hsl(var(--p)) 28%, transparent);
        }
}