/** * tokens.css — Diego Kaminsky · Escuela de Canto * Paleta G2 · Marfil halo dorado (tema claro con degradado) * * Tokens CSS runtime derivados de theme.json. * Los valores --wp--preset--* y --wp--custom--* los genera WordPress * automáticamente desde theme.json; aquí añadimos aliases cortos y * tokens derivados que se usan fuera de bloques (templates, components). * * Fuente de verdad: context/design-system.md y theme.json. * * CONTRASTES WCAG AA verificados: * ink (#2A2218) sobre bg (#FCF7ED) ≈ 13.5:1 ✓ * accent-soft (#8A5E22) sobre bg ≈ 5.1:1 ✓ (texto pequeño) * accent (#A8762E) sobre bg ≈ 4.1:1 — NO usar en texto pequeño * botón: #FFF8EC sobre accent (#A8762E) ≈ 4.9:1 ✓ * footer ink: #E7DCC4 sobre #241C15 ≈ 9.2:1 ✓ * gold-deep (#6E4E1C) sobre ámbar #E7C575 (peor caso del --grad-bg) ≈ 4.56:1 ✓ * gold-deep (#6E4E1C) sobre ámbar #EFD089 ≈ 5.07:1 ✓ * gold-deep (#6E4E1C) sobre bg (#FCF7ED) ≈ 7.10:1 ✓ * accent-soft (#8A5E22) sobre ámbar #E7C575 ≈ 3.41:1 ✗ (por eso gold-deep) */ :root { /* ----------------------------------------------------------------------- Colores — aliases cortos de --wp--preset--color--* --------------------------------------------------------------------- */ --color-bg: var(--wp--preset--color--bg, #FCF7ED); --color-bg-deep: var(--wp--preset--color--bg-deep, #EFE3CC); --color-surface: var(--wp--preset--color--surface, #FFFFFF); --color-surface-raised: var(--wp--preset--color--surface-raised, #FFFFFF); --color-text: var(--wp--preset--color--ink, #2A2218); --color-ink: var(--wp--preset--color--ink, #2A2218); /* alias directo para botones */ --color-text-muted: var(--wp--preset--color--ink-soft, #6E6149); --color-accent: var(--wp--preset--color--accent, #A8762E); --color-accent-bright: var(--wp--preset--color--accent-bright, #C49A45); --color-accent-soft: var(--wp--preset--color--accent-soft, #8A5E22); --color-border: var(--wp--preset--color--line, #E7DCC4); --color-border-gold: rgba(168, 118, 46, 0.30); --color-whatsapp: var(--wp--preset--color--whatsapp, #0F7A6E); /* Segundo dorado — más profundo, para TEXTO pequeño sobre el degradado. accent-soft (#8A5E22) no pasa 4.5:1 sobre la esquina ámbar del --grad-bg; gold-deep sí (verificado, ver cabecera del archivo). Úsalo en eyebrows, metas y cualquier texto dorado pequeño que pueda caer sobre el degradado. */ --gold-deep: #6E4E1C; /* Superficie casi opaca para cards — flotan sobre el degradado en vez de disolverse en él (antes rgba(255,253,246,.70), demasiado translúcida). */ --card-surface: rgba(255, 255, 255, 0.95); /* ----------------------------------------------------------------------- Gradientes --------------------------------------------------------------------- */ /* Fondo del sitio — degradado en capas: blooms radiales dorados + linear base */ --grad-bg: radial-gradient(60% 55% at 10% 6%, rgba(255,253,246,.92) 0%, transparent 55%), radial-gradient(75% 65% at 90% 10%, rgba(201,154,64,.30) 0%, transparent 58%), radial-gradient(85% 75% at 92% 96%, rgba(168,118,46,.24) 0%, transparent 60%), linear-gradient(135deg, #FCF7ED 0%, #F3E2B6 52%, #E7C575 100%); /* Gradiente dorado decorativo para titulares em, filetes, badges */ --gradient-gold: linear-gradient(135deg, #C49A45, #A8762E 55%, #8A5E22); /* Velo oscuro — SOLO para islas foto con texto encima */ --gradient-veil: linear-gradient(180deg, rgba(6, 6, 7, 0) 0%, rgba(6, 6, 7, 0.85) 100%); /* Superficie suave (reemplaza gradient-surface oscuro) */ --gradient-surface: linear-gradient(180deg, var(--color-surface) 0%, var(--color-bg-deep) 100%); /* ----------------------------------------------------------------------- Tipografía — aliases de --wp--preset--font-family--* --------------------------------------------------------------------- */ --font-body: var(--wp--preset--font-family--body, "Inter", system-ui, sans-serif); --font-display: var(--wp--preset--font-family--display, "Cormorant Garamond", Georgia, serif); /* Escala tipográfica fluida — aliases de --wp--preset--font-size--* */ --text-xs: var(--wp--preset--font-size--xs, 0.75rem); --text-sm: var(--wp--preset--font-size--sm, 0.875rem); --text-base: var(--wp--preset--font-size--base, 1rem); --text-lg: var(--wp--preset--font-size--lg, clamp(1.125rem, 2vw, 1.25rem)); --text-xl: var(--wp--preset--font-size--xl, clamp(1.25rem, 2.5vw, 1.5rem)); --text-2xl: var(--wp--preset--font-size--2xl, clamp(1.5rem, 3vw, 1.95rem)); --text-3xl: var(--wp--preset--font-size--3xl, clamp(1.95rem, 4vw, 2.6rem)); --text-4xl: var(--wp--preset--font-size--4xl, clamp(2.4rem, 5vw, 3.4rem)); --text-5xl: var(--wp--preset--font-size--5xl, clamp(3rem, 7vw, 4.5rem)); --text-6xl: var(--wp--preset--font-size--6xl, clamp(3.5rem, 10vw, 6rem)); --text-7xl: clamp(4rem, 11vw, 7rem); /* ----------------------------------------------------------------------- Espaciado y layout --------------------------------------------------------------------- */ --section-y: var(--wp--custom--spacing--section-y, clamp(3.5rem, 9vw, 7rem)); --section-y-lg: clamp(4.5rem, 11vw, 9rem); /* secciones "grandes" — hero-adjacent */ --section-y-sm: clamp(2.5rem, 6vw, 4rem); /* secciones compactas — testimonios, FAQ */ --container-x: var(--wp--custom--spacing--container-x, clamp(1rem, 5vw, 2rem)); --content-w: 760px; --wide-w: 1200px; /* ----------------------------------------------------------------------- Bordes y radios — aliases de --wp--custom--border--* --------------------------------------------------------------------- */ /* Estilo editorial: esquinas cuadradas en todo el UI */ --radius-sm: var(--wp--custom--border--radius-sm, 0px); --radius-md: var(--wp--custom--border--radius-md, 0px); --radius-lg: var(--wp--custom--border--radius-lg, 0px); --radius-full: var(--wp--custom--border--radius-full, 9999px); /* solo botón WA flotante */ /* ----------------------------------------------------------------------- Sombras — tema claro, cálidas --------------------------------------------------------------------- */ --shadow-card: var( --wp--custom--shadow--card, 0 1px 2px rgba(58, 40, 10, 0.06), 0 18px 40px -24px rgba(58, 40, 10, 0.22) ); /* Sombra de reposo — cards elevadas sobre el degradado (figura/fondo). */ --shadow-rest: 0 1px 2px rgba(58, 40, 10, 0.05), 0 18px 42px -26px rgba(58, 40, 10, 0.22); /* Sombra de hover neutra (sin dorado) — cards de contenido normales. */ --shadow-hover: 0 1px 2px rgba(58, 40, 10, 0.07), 0 24px 52px -22px rgba(58, 40, 10, 0.30); /* --glow-gold: RESERVADO para CTAs (botones primarios) y la card destacada (.service-card--featured). No usar en hover de cards de contenido normales — diluye la jerarquía si se aplica a todo. */ --glow-gold: var( --wp--custom--shadow--glow-gold, 0 0 0 1px rgba(168, 118, 46, 0.30), 0 10px 30px -12px rgba(168, 118, 46, 0.28) ); --glow-gold-strong: 0 0 0 1px rgba(168, 118, 46, 0.40), 0 12px 40px -8px rgba(168, 118, 46, 0.35); /* ----------------------------------------------------------------------- Easings --------------------------------------------------------------------- */ --ease-out: var(--wp--custom--ease--out, cubic-bezier(0.22, 1, 0.36, 1)); --ease-in-out: var(--wp--custom--ease--in-out, cubic-bezier(0.65, 0.05, 0.36, 1)); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* ----------------------------------------------------------------------- Duraciones de transición --------------------------------------------------------------------- */ --dur-fast: 200ms; --dur-base: 400ms; --dur-slow: 700ms; /* Aliases compuestos listos para usar en transition: */ --transition-fast: var(--dur-fast) var(--ease-out); --transition-base: var(--dur-base) var(--ease-out); --transition-slow: var(--dur-slow) var(--ease-out); /* ----------------------------------------------------------------------- Z-index canónico --------------------------------------------------------------------- */ --z-dropdown: var(--wp--custom--z-index--dropdown, 100); --z-sticky: var(--wp--custom--z-index--sticky, 200); --z-floating: var(--wp--custom--z-index--floating, 250); --z-modal: var(--wp--custom--z-index--modal, 300); --z-cookie: var(--wp--custom--z-index--cookie-banner, 9998); }