/* escapa — Design Tokens (dirección Campus) */

:root {
    /* ── Color ─────────────────────────────────────────── */
    --bg:           oklch(0.98 0.008 80);
    --bg-alt:       oklch(0.95 0.012 70);
    --ink:          oklch(0.25 0.015 55);
    --ink-soft:     oklch(0.48 0.02 55);
    --border:       oklch(0.88 0.015 70);
    --accent:       oklch(0.62 0.13 40);    /* terracota — acción primaria */
    --accent-2:     oklch(0.72 0.13 75);    /* ocre — highlights */
    --accent-3:     oklch(0.58 0.1 155);    /* verde — éxito */
    --accent-err:   oklch(0.55 0.18 25);    /* rojo — error */
    --surface:      #ffffff;

    /* Colores OPE */
    --ope-terracota: oklch(0.62 0.13 40);
    --ope-ocre:      oklch(0.72 0.13 75);
    --ope-salvia:    oklch(0.58 0.1 155);
    --ope-arcilla:   oklch(0.60 0.10 55);

    /* ── Tipografía ─────────────────────────────────────── */
    --font-display: "Inter", system-ui, sans-serif;
    --font-body:    "Inter", system-ui, sans-serif;
    --font-mono:    "JetBrains Mono", ui-monospace, monospace;

    /* Escala tipográfica */
    --text-xs:   0.6875rem;   /* 11px — labels caps */
    --text-sm:   0.8125rem;   /* 13px — metadatos */
    --text-base: 1rem;        /* 16px — body */
    --text-lg:   1.1875rem;   /* 19px — lead */
    --text-h3:   1.375rem;    /* 22px */
    --text-h2:   2.125rem;    /* 34px */
    --text-h1:   3.5rem;      /* 56px */

    /* ── Forma ──────────────────────────────────────────── */
    --radius:    12px;
    --radius-lg: 20px;
    --radius-sm: 8px;
    --radius-xs: 4px;

    /* ── Espaciado (base 8px) ───────────────────────────── */
    --sp-1: 8px;
    --sp-2: 12px;
    --sp-3: 16px;
    --sp-4: 24px;
    --sp-5: 32px;
    --sp-6: 48px;
    --sp-7: 64px;

    /* ── Sombras ─────────────────────────────────────────── */
    --shadow-sm:  0 2px 8px rgba(0,0,0,0.05);
    --shadow-md:  0 8px 24px rgba(0,0,0,0.06);
    --shadow-lg:  0 20px 60px rgba(0,0,0,0.10);

    /* ── Layout ──────────────────────────────────────────── */
    --container-max: 1600px;
    --container-pad: 32px;
    --header-h:      68px;

    /* ── Transiciones ────────────────────────────────────── */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --duration: 160ms;
}

@media (max-width: 768px) {
    :root {
        --container-pad: 20px;
        --text-h1: 2.25rem;
        --text-h2: 1.5rem;
    }
}