/**
 * Brand tokens · Jaltech
 * Fuente: https://brand-jaltech.vercel.app/
 *
 * Cascade layer: tokens (base de todo lo demás).
 * NO poner reglas de estilo acá — solo custom properties.
 */

/* Orden global de cascade layers — se declara acá porque tokens.css
   carga primero. Los estilos SIN layer siempre ganan a los con layer. */
@layer tokens, base, components, pages, overrides;

@layer tokens {
  :root {
    /* ============ Colores brand ============ */
    --jt-green:        #529A00;
    --jt-green-hover:  #6BB81B;
    --jt-ink:          #1D2333;
    --jt-orange:       #FF8600;
    --jt-purple:       #6A2AE1;
    --jt-cream:        #F6F6F2;
    --jt-surface:      #FAFBF7;
    --jt-gray-border:  #ECEEEA;

    /* Alias semánticos (para componentes) */
    --jt-color-primary:      var(--jt-green);
    --jt-color-primary-hover:var(--jt-green-hover);
    --jt-color-accent:       var(--jt-orange);
    --jt-color-text:         var(--jt-ink);
    --jt-color-muted:        #6B7280;
    --jt-color-bg:           #ffffff;
    --jt-color-bg-alt:       var(--jt-surface);
    --jt-color-border:       var(--jt-gray-border);
    --jt-color-danger:       #DC2626;
    --jt-color-success:      var(--jt-green);

    /* ============ Tipografía ============
       Todo el sitio usa Poppins (display y body). Los pesos hacen la
       diferencia visual entre títulos (700-800) y body (400-500). */
    --jt-font-display: "Poppins", "Aptos", "Fredoka", -apple-system, sans-serif;
    --jt-font-body:    "Poppins", "Aptos", "Fredoka", -apple-system, sans-serif;

    /* Escala tipográfica — rem base 16px
       Balance entre look minimalista y presencia visual de títulos.
       Cambiar acá cascadea a todo el theme. */
    --jt-fs-display:   3rem;     /* 48px  */
    --jt-fs-h1:        2.25rem;  /* 36px  */
    --jt-fs-h2:        1.75rem;  /* 28px  */
    --jt-fs-h3:        1.375rem; /* 22px  */
    --jt-fs-body:      0.9375rem;/* 15px  */
    --jt-fs-body-sm:   0.875rem; /* 14px  */
    --jt-fs-button:    0.8125rem;/* 13px  */
    --jt-fs-caption:   0.6875rem;/* 11px  */
    --jt-fs-badge:     0.625rem; /* 10px  */

    --jt-fw-regular:   400;
    --jt-fw-medium:    500;
    --jt-fw-semibold:  600;
    --jt-fw-bold:      700;
    --jt-fw-extrabold: 800;
    --jt-fw-black:     900;

    --jt-lh-tight: 1.15;
    --jt-lh-body:  1.55;

    /* ============ Spacing (base 4px) ============ */
    --jt-space-1:  0.25rem;  /* 4px */
    --jt-space-2:  0.5rem;   /* 8px */
    --jt-space-3:  0.75rem;  /* 12px */
    --jt-space-4:  1rem;     /* 16px */
    --jt-space-5:  1.25rem;  /* 20px */
    --jt-space-6:  1.5rem;   /* 24px */
    --jt-space-8:  2rem;     /* 32px */
    --jt-space-10: 2.5rem;   /* 40px */
    --jt-space-12: 3rem;     /* 48px */
    --jt-space-16: 4rem;     /* 64px */

    /* ============ Radios ============ */
    --jt-radius-sm:   4px;
    --jt-radius-md:   8px;
    --jt-radius-lg:   12px;
    --jt-radius-xl:   20px;
    --jt-radius-pill: 999px;

    /* ============ Elevación ============ */
    --jt-shadow-sm: 0 1px 2px rgba(29, 35, 51, 0.06);
    --jt-shadow-md: 0 4px 12px rgba(29, 35, 51, 0.08);
    --jt-shadow-lg: 0 12px 32px rgba(29, 35, 51, 0.10);

    /* ============ Transiciones ============ */
    --jt-transition-fast:   120ms ease;
    --jt-transition-base:   200ms ease;
    --jt-transition-smooth: 320ms cubic-bezier(0.4, 0, 0.2, 1);

    /* ============ Layout ============ */
    --jt-container-max: 1200px;
    --jt-header-height: 80px;
    --jt-z-header:      100;
    --jt-z-overlay:     900;
    --jt-z-modal:       1000;
  }
}