/* ============================================================
   Escuela de Tatuadores — Design Tokens
   WHITE background design system — prefix: --ed-
   ============================================================ */

:root {

    /* ── Colors ──────────────────────────────────────────────── */
    --ed-bg:           #ffffff;
    --ed-bg-alt:       #f5f5f5;
    --ed-bg-dark:      #1a1a1a;
    --ed-text:         #1a1a1a;
    --ed-text-lt:      #666666;
    --ed-text-inv:     #ffffff;

    --ed-naranja:      #f55b11;
    --ed-naranja-hover: #e04d0a;
    --ed-naranja-light: rgba(245, 91, 17, 0.08);
    --ed-naranja-mid:  rgba(245, 91, 17, 0.18);

    --ed-black:        #000000;
    --ed-white:        #ffffff;
    --ed-gray-lt:      #999999;
    --ed-gray-md:      #cccccc;
    --ed-border:       #e5e5e5;

    /* Footer dark palette */
    --ed-footer-bg:    #0d0d0d;
    --ed-footer-text:  rgba(255, 255, 255, 0.7);
    --ed-footer-head:  #ffffff;
    --ed-footer-border: rgba(255, 255, 255, 0.1);

    /* ── Typography ──────────────────────────────────────────── */
    --ed-font-display: 'Anton', sans-serif;
    --ed-font-body:    'Barlow', sans-serif;

    /* Type scale */
    --ed-text-xs:   0.75rem;   /* 12px */
    --ed-text-sm:   0.875rem;  /* 14px */
    --ed-text-base: 1rem;      /* 16px */
    --ed-text-md:   1.125rem;  /* 18px */
    --ed-text-lg:   1.25rem;   /* 20px */
    --ed-text-xl:   1.5rem;    /* 24px */
    --ed-text-2xl:  1.875rem;  /* 30px */
    --ed-text-3xl:  2.5rem;    /* 40px */
    --ed-text-4xl:  3.5rem;    /* 56px */

    /* Line heights */
    --ed-leading-tight:  1.15;
    --ed-leading-snug:   1.3;
    --ed-leading-normal: 1.6;
    --ed-leading-loose:  1.75;

    /* Letter spacing */
    --ed-tracking-tight:  -0.02em;
    --ed-tracking-normal: 0em;
    --ed-tracking-wide:   0.05em;
    --ed-tracking-widest: 0.12em;

    /* ── Spacing ─────────────────────────────────────────────── */
    --ed-space-1:  0.25rem;  /* 4px */
    --ed-space-2:  0.5rem;   /* 8px */
    --ed-space-3:  0.75rem;  /* 12px */
    --ed-space-4:  1rem;     /* 16px */
    --ed-space-5:  1.25rem;  /* 20px */
    --ed-space-6:  1.5rem;   /* 24px */
    --ed-space-8:  2rem;     /* 32px */
    --ed-space-10: 2.5rem;   /* 40px */
    --ed-space-12: 3rem;     /* 48px */
    --ed-space-16: 4rem;     /* 64px */
    --ed-space-20: 5rem;     /* 80px */
    --ed-space-24: 6rem;     /* 96px */
    --ed-space-32: 8rem;     /* 128px */

    /* ── Layout ──────────────────────────────────────────────── */
    --ed-container:      1180px;
    --ed-container-sm:   860px;
    --ed-container-wide: 1400px;
    --ed-header-h:       80px;

    /* ── Border radius ───────────────────────────────────────── */
    --ed-radius-sm:   4px;
    --ed-radius-md:   8px;
    --ed-radius-lg:   12px;
    --ed-radius-xl:   20px;
    --ed-radius-full: 9999px;

    /* ── Shadows ─────────────────────────────────────────────── */
    --ed-shadow-xs:  0 1px 3px rgba(0, 0, 0, 0.06);
    --ed-shadow-sm:  0 2px 8px rgba(0, 0, 0, 0.08);
    --ed-shadow-md:  0 4px 20px rgba(0, 0, 0, 0.10);
    --ed-shadow-lg:  0 8px 40px rgba(0, 0, 0, 0.12);
    --ed-shadow-xl:  0 16px 64px rgba(0, 0, 0, 0.16);
    --ed-shadow-naranja: 0 4px 24px rgba(245, 91, 17, 0.30);

    /* ── Transitions ─────────────────────────────────────────── */
    --ed-transition-fast:   150ms ease;
    --ed-transition-base:   250ms ease;
    --ed-transition-slow:   400ms ease;
    --ed-transition-spring: 300ms cubic-bezier(0.34, 1.56, 0.64, 1);

    /* ── Z-index ─────────────────────────────────────────────── */
    --ed-z-base:     1;
    --ed-z-dropdown: 100;
    --ed-z-header:   200;
    --ed-z-modal:    300;
    --ed-z-toast:    400;
    --ed-z-float:    500;
}

/* ── Reset / Base ────────────────────────────────────────────── */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--ed-font-body);
    font-size: var(--ed-text-base);
    line-height: var(--ed-leading-normal);
    color: var(--ed-text);
    background-color: var(--ed-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img, video {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
}

ul, ol {
    list-style: none;
}

button {
    cursor: pointer;
    border: none;
    background: none;
    font-family: inherit;
}

/* ── Utility classes ─────────────────────────────────────────── */
.ed-container {
    width: 100%;
    max-width: var(--ed-container);
    margin-inline: auto;
    padding-inline: var(--ed-space-6);
}

.ed-container--sm {
    max-width: var(--ed-container-sm);
}

.ed-container--wide {
    max-width: var(--ed-container-wide);
}

.ed-section {
    padding-block: var(--ed-space-24);
}

.ed-section--sm {
    padding-block: var(--ed-space-16);
}

.ed-section--alt {
    background-color: var(--ed-bg-alt);
}

.ed-section--dark {
    background-color: var(--ed-bg-dark);
    color: var(--ed-text-inv);
}

/* Fade-in animation hook */
.ed-fade-in {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity var(--ed-transition-slow), transform var(--ed-transition-slow);
}

.ed-fade-in.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Screen reader only */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}