/* ============================================================
 * TP Template V4 — Design Tokens
 * Sistema de design original. Tudo via CSS custom properties para
 * permitir theming per-store via wp_option em iteração futura.
 * ============================================================ */

:root {
    /* ── Colour scale ─────────────────────────────────────────── */
    /* Neutral grayscale */
    --tp4-c-white:        #ffffff;
    --tp4-c-gray-50:      #f7f7f5;
    --tp4-c-gray-100:     #ececea;
    --tp4-c-gray-200:     #d8d8d4;
    --tp4-c-gray-300:     #b7b7b1;
    --tp4-c-gray-400:     #8d8d86;
    --tp4-c-gray-500:     #66665f;
    --tp4-c-gray-600:     #494943;
    --tp4-c-gray-700:     #34342f;
    --tp4-c-gray-800:     #21211e;
    --tp4-c-gray-900:     #131311;

    /* Brand — warm earth accent (avoid pure orange clash with stock themes) */
    --tp4-c-brand:        #c2541b;
    --tp4-c-brand-hover:  #a44415;
    --tp4-c-brand-soft:   #fdeee1;
    --tp4-c-brand-ink:    #ffffff;

    /* Secondary — calm olive */
    --tp4-c-accent:       #5a6b48;
    --tp4-c-accent-hover: #485838;
    --tp4-c-accent-soft:  #ebefe4;

    /* Functional */
    --tp4-c-success:      #1f7a4d;
    --tp4-c-success-soft: #def1e6;
    --tp4-c-warning:      #b4791d;
    --tp4-c-danger:       #b53e3e;

    /* Surface aliases (semantic) */
    --tp4-bg:             var(--tp4-c-white);
    --tp4-bg-alt:         var(--tp4-c-gray-50);
    --tp4-bg-dark:        var(--tp4-c-gray-900);
    --tp4-surface:        var(--tp4-c-white);
    --tp4-surface-alt:    var(--tp4-c-gray-50);
    --tp4-border:         var(--tp4-c-gray-200);
    --tp4-border-strong:  var(--tp4-c-gray-300);

    /* Text */
    --tp4-text:           var(--tp4-c-gray-800);
    --tp4-text-muted:     var(--tp4-c-gray-500);
    --tp4-text-soft:      var(--tp4-c-gray-600);
    --tp4-text-inverse:   var(--tp4-c-white);

    /* ── Typography ───────────────────────────────────────────── */
    --tp4-font-sans:      'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --tp4-font-display:   'Manrope', 'Inter', system-ui, sans-serif;

    --tp4-fs-xs:          0.75rem;    /* 12 */
    --tp4-fs-sm:          0.875rem;   /* 14 */
    --tp4-fs-base:        1rem;       /* 16 */
    --tp4-fs-lg:          1.125rem;   /* 18 */
    --tp4-fs-xl:          1.25rem;    /* 20 */
    --tp4-fs-2xl:         1.5rem;     /* 24 */
    --tp4-fs-3xl:         1.875rem;   /* 30 */
    --tp4-fs-4xl:         2.25rem;    /* 36 */
    --tp4-fs-5xl:         3rem;       /* 48 */
    --tp4-fs-6xl:         3.75rem;    /* 60 */

    --tp4-lh-tight:       1.15;
    --tp4-lh-snug:        1.3;
    --tp4-lh-base:        1.55;
    --tp4-lh-loose:       1.75;

    --tp4-fw-regular:     400;
    --tp4-fw-medium:      500;
    --tp4-fw-semi:        600;
    --tp4-fw-bold:        700;
    --tp4-fw-black:       800;

    --tp4-tracking-tight: -0.01em;
    --tp4-tracking-wide:  0.04em;

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

    /* Section padding tokens (mobile→desktop) */
    --tp4-section-py:        var(--tp4-s-16);    /* 64 default */
    --tp4-section-py-lg:     var(--tp4-s-24);    /* 96 desktop */

    /* ── Layout ───────────────────────────────────────────────── */
    --tp4-container:         80rem;       /* 1280 */
    --tp4-container-narrow:  56rem;       /* 896  */
    --tp4-container-px:      var(--tp4-s-5);  /* 20 mobile */

    /* ── Radius ───────────────────────────────────────────────── */
    --tp4-r-sm:    0.25rem;     /* 4  */
    --tp4-r-md:    0.5rem;      /* 8  */
    --tp4-r-lg:    0.75rem;     /* 12 */
    --tp4-r-xl:    1rem;        /* 16 */
    --tp4-r-2xl:   1.5rem;      /* 24 */
    --tp4-r-pill:  9999px;

    /* ── Shadow ───────────────────────────────────────────────── */
    --tp4-shadow-sm:  0 1px 2px rgba(15, 17, 21, 0.06);
    --tp4-shadow:     0 2px 8px rgba(15, 17, 21, 0.08);
    --tp4-shadow-md:  0 6px 16px rgba(15, 17, 21, 0.1);
    --tp4-shadow-lg:  0 18px 38px rgba(15, 17, 21, 0.14);

    /* ── Motion ───────────────────────────────────────────────── */
    --tp4-ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
    --tp4-ease:       ease-out;
    --tp4-dur-fast:   120ms;
    --tp4-dur:        180ms;
    --tp4-dur-slow:   320ms;

    /* ── Z-index ──────────────────────────────────────────────── */
    --tp4-z-topbar:   30;
    --tp4-z-header:   40;
    --tp4-z-drawer:   90;
    --tp4-z-overlay:  100;

    /* ── Header heights ───────────────────────────────────────── */
    --tp4-topbar-h:   2rem;     /* 32 */
    --tp4-header-h:   4.5rem;   /* 72 */
}

/* Respeitar reduced motion */
@media (prefers-reduced-motion: reduce) {
    :root {
        --tp4-dur-fast: 0ms;
        --tp4-dur: 0ms;
        --tp4-dur-slow: 0ms;
    }
}