/* ============================================================
   CristalesGafas — Design Tokens
   Incluir antes de cualquier otro CSS del child theme
   ============================================================ */

:root {
  /* ── Colores ──────────────────────────────────────────── */
  --paper:        #ffffff;
  --bg:           #f4f7f9;
  --bg-2:         #eef2f5;
  --ink:          #0d2233;
  --muted:        #5a6b79;
  --faint:        #8a99a5;
  --line:         #e4eaee;
  --line-strong:  #d4dde3;
  --deep:         #0b2740;
  --blue:         #00c4cc;      /* teal principal */
  --blue-ink:     #009aa0;
  --blue-soft:    #e0f9fa;
  --green:        #0e9f6e;
  --green-soft:   #e7f6ef;
  --sand:         #ece2d1;
  --sand-soft:    #f6f0e6;

  /* ── Tipografía ───────────────────────────────────────── */
  --font-display: "Schibsted Grotesk", system-ui, sans-serif;
  --font-body:    "Hanken Grotesk",    system-ui, sans-serif;

  /* ── Escala tipográfica ───────────────────────────────── */
  --text-xs:   0.75rem;   /* 12px */
  --text-sm:   0.875rem;  /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-md:   1.125rem;  /* 18px */
  --text-lg:   1.25rem;   /* 20px */
  --text-xl:   1.5rem;    /* 24px */
  --text-2xl:  1.875rem;  /* 30px */
  --text-3xl:  2.25rem;   /* 36px */
  --text-4xl:  3rem;      /* 48px */

  /* ── Pesos ────────────────────────────────────────────── */
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;
  --fw-extrabold: 800;

  /* ── Bordes redondeados ───────────────────────────────── */
  --r-xs:   10px;
  --r-sm:   16px;
  --r-md:   22px;
  --r-lg:   30px;
  --r-xl:   40px;
  --r-full: 9999px;
  --card-radius: 26px;

  /* ── Sombras ──────────────────────────────────────────── */
  --shadow-soft:  0 1px 2px rgba(13,34,51,.04), 0 12px 30px -16px rgba(13,34,51,.18);
  --shadow-card:  0 1px 2px rgba(13,34,51,.05), 0 24px 48px -28px rgba(13,34,51,.28);
  --shadow-float: 0 18px 48px -20px rgba(13,34,51,.30);
  --shadow-btn:   0 4px 14px -4px rgba(31,95,224,.40);

  /* ── Layout ───────────────────────────────────────────── */
  --maxw:     1200px;
  --gutter:   clamp(20px, 5vw, 56px);
  --header-h: 72px;

  /* ── Espaciado ────────────────────────────────────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  28px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ── Transiciones ─────────────────────────────────────── */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:    cubic-bezier(0.4, 0, 1, 1);
  --ease-inout: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:   150ms;
  --dur-base:   220ms;
  --dur-slow:   350ms;

  /* ── Z-index ──────────────────────────────────────────── */
  --z-base:    0;
  --z-above:   10;
  --z-dropdown:200;
  --z-sticky:  300;
  --z-overlay: 400;
  --z-modal:   500;
  --z-toast:   600;
}