/**
 * kaf-tokens.css — Design Tokens del KAF.
 *
 * Variables CSS centralizadas extraídas del tema Avada Daycare,
 * traducidas a nomenclatura propia del Kiosnkof Application Framework.
 *
 * @package KAF/CSS
 */

/* ─── @font-face: Amatic SC (Títulos) ────────────────────── */
@font-face {
    font-family: "Amatic SC";
    src: url("../fonts/amatic-sc/amatic-sc-700-10c637.woff2") format("woff2"),
         url("../fonts/amatic-sc/amatic-sc-700-2704e8.woff2") format("woff2"),
         url("../fonts/amatic-sc/amatic-sc-700-d097e5.woff2") format("woff2"),
         url("../fonts/amatic-sc/amatic-sc-700-da0b08.woff2") format("woff2"),
         url("../fonts/amatic-sc/amatic-sc-700-e7af3d.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ─── @font-face: Lato (Cuerpo / Navegación) ─────────────── */
@font-face {
    font-family: "Lato";
    src: url("../fonts/lato/lato-014c45.woff2") format("woff2"),
         url("../fonts/lato/lato-0b2d42.woff2") format("woff2"),
         url("../fonts/lato/lato-304baf.woff2") format("woff2"),
         url("../fonts/lato/lato-80d4aa.woff2") format("woff2"),
         url("../fonts/lato/lato-85d0d3.woff2") format("woff2"),
         url("../fonts/lato/lato-c219a5.woff2") format("woff2"),
         url("../fonts/lato/lato-c29089.woff2") format("woff2"),
         url("../fonts/lato/lato-db24fb.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* ─── @font-face: Daycare Icon Font ──────────────────────── */
@font-face {
    font-family: "daycare";
    src: url("../fonts/daycare/daycare71a7.eot");
    src: url("../fonts/daycare/daycare71a7.eot#iefix") format("embedded-opentype"),
         url("../fonts/daycare/daycare71a7.ttf") format("truetype"),
         url("../fonts/daycare/daycare71a7.woff") format("woff"),
         url("../fonts/daycare/daycare71a7.svg#daycare") format("svg");
    font-weight: 400;
    font-style: normal;
    font-display: block;
}

[class*=" daycare-"] {
    font-family: "daycare" !important;
    speak: never;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.daycare-close::before { content: "\e90d"; }
.daycare-menu::before  { content: "\e90e"; }

/* ─── Design Tokens ──────────────────────────────────────── */
:root {
    /* ── Paleta de Colores ──────────────────────────────── */
    --kaf-white:       #ffffff;
    --kaf-yellow:      #ffd263;
    --kaf-green:       #26c281;
    --kaf-coral:       #fb6667;
    --kaf-blue-light:  #6c8ad8;
    --kaf-gray:        #8f8f8f;
    --kaf-blue-dark:   #3661b0;
    --kaf-dark:        #333333;

    /* Derivados calculados */
    --kaf-coral-hover:     #fa4d4e;
    --kaf-green-hover:     #219e6c;
    --kaf-blue-dark-light: #4a7ec8;
    --kaf-gray-light:      #f8f9fa;
    --kaf-gray-medium:     #d2d2d2;
    --kaf-dark-soft:       #4a4a4a;
    --kaf-orange:          #f7801a;
    --kaf-orange-hover:    #d96b10;
    --kaf-purple:          #7b5ea7;
    --kaf-purple-hover:    #624990;
    --kaf-overlay:         rgba(0, 0, 0, 0.5);

    /* ── Tipografía ─────────────────────────────────────── */
    --kaf-font-heading:    "Amatic SC", cursive;
    --kaf-font-body:       "Lato", sans-serif;
    --kaf-font-icon:       "daycare";

    /* ── Tamaños de Fuente ──────────────────────────────── */
    --kaf-fs-hero:       64px;
    --kaf-fs-h1:         45px;
    --kaf-fs-h2:         45px;
    --kaf-fs-h3:         16px;
    --kaf-fs-body:       16px;
    --kaf-fs-small:      13px;
    --kaf-fs-nav:        16px;
    --kaf-fs-btn:        12px;

    /* ── Line Heights ───────────────────────────────────── */
    --kaf-lh-heading:    1.4;
    --kaf-lh-nav:        1.5;
    --kaf-lh-body:       1.8;

    /* ── Letter Spacing ─────────────────────────────────── */
    --kaf-ls-nav:        1px;
    --kaf-ls-heading:    0px;

    /* ── Espaciado (Scale de 4px) ───────────────────────── */
    --kaf-space-1:     4px;
    --kaf-space-2:     8px;
    --kaf-space-3:    12px;
    --kaf-space-4:    16px;
    --kaf-space-5:    20px;
    --kaf-space-6:    24px;
    --kaf-space-7:    32px;
    --kaf-space-8:    48px;
    --kaf-space-9:    64px;
    --kaf-space-10:   80px;
    --kaf-space-11:  100px;
    --kaf-space-12:  120px;

    /* ── Layout ─────────────────────────────────────────── */
    --kaf-site-width:          1350px;
    --kaf-side-header-width:   330px;
    --kaf-section-padding-x:   50px;
    --kaf-section-padding-y:  100px;

    /* ── Bordes y Sombras ───────────────────────────────── */
    --kaf-radius-sm:    4px;
    --kaf-radius-md:    8px;
    --kaf-radius-lg:   16px;
    --kaf-radius-pill:  25px;
    --kaf-shadow-sm:    0 2px 4px rgba(0, 0, 0, 0.1);
    --kaf-shadow-md:    0 4px 12px rgba(0, 0, 0, 0.15);
    --kaf-shadow-lg:    0 8px 24px rgba(0, 0, 0, 0.2);
    --kaf-shadow-box:   0 0 50px 1px rgba(0, 0, 0, 0.22);

    /* ── Formularios ────────────────────────────────────── */
    --kaf-form-height:      50px;
    --kaf-form-bg:          var(--kaf-white);
    --kaf-form-text:        var(--kaf-dark-soft);
    --kaf-form-border:      var(--kaf-gray-medium);
    --kaf-form-radius:      0px;
    --kaf-form-font-size:   var(--kaf-fs-small);

    /* ── Transiciones ───────────────────────────────────── */
    --kaf-transition-fast:   150ms ease;
    --kaf-transition:        300ms ease;
    --kaf-transition-slow:   500ms ease;

    /* ── Breakpoints (para referencia, usados en media queries) ── */
    /* sm: 640px   md: 1024px   lg: 1025px+ */

    /* ── Z-Index Scale ──────────────────────────────────── */
    --kaf-z-dropdown:    100;
    --kaf-z-sticky:     1000;
    --kaf-z-overlay:    5000;
    --kaf-z-modal:     10000;
    --kaf-z-toast:     50000;
}