/*
* tokens.ricettly.css
* Sistema de design tokens para Ricettly
* Basado en Open Props — overrides con identidad propia
*
* USO:
* 1. Cargar Open Props primero:
*
* 2. Luego este archivo:
*
* 3. Tu CSS de componentes consume solo variables de este archivo.
*
* FUENTES (añadir en antes de este archivo):
*
*/
/* ─────────────────────────────────────────────
1. PALETA BASE — colores crudos
No usar directamente en componentes.
Son la fuente de verdad de la que derivan
todos los roles semánticos de abajo.
───────────────────────────────────────────── */
:root {
/* Rojo Guindilla — color de marca */
--ricettly-red-1: #fdf2f1; /* tinte muy claro — fondos de alerta suave */
--ricettly-red-2: #f5c6c2; /* tinte claro */
--ricettly-red-3: #e8857d; /* tinte medio */
--ricettly-red-4: #C0392B; /* ← BRAND PRIMARY */
--ricettly-red-5: #962d21; /* tono oscuro — hover de botón */
--ricettly-red-6: #6e2118; /* tono muy oscuro */
/* Piedra — familia de grises cálidos */
--ricettly-stone-0: #ffffff;
--ricettly-stone-1: #faf9f7; /* superficie elevada (tarjetas) */
--ricettly-stone-2: #F5F3F0; /* ← BG BASE */
--ricettly-stone-3: #e8e4df; /* borde sutil */
--ricettly-stone-4: #ccc7c0; /* borde medio */
--ricettly-stone-5: #9e9890; /* texto desactivado */
--ricettly-stone-6: #6b6560; /* texto secundario */
--ricettly-stone-7: #3a3632; /* texto body oscuro */
--ricettly-stone-8: #1C1C1E; /* ← TEXT PRIMARY (Grafito) */
/* Accent — naranja especiado, complementario al rojo */
--ricettly-accent-1: #fef4ed;
--ricettly-accent-2: #fad5b0;
--ricettly-accent-3: #f0a86b;
--ricettly-accent-4: #E07840; /* accent principal */
--ricettly-accent-5: #b85e2e; /* accent hover */
/* Éxito / Error / Aviso — neutros semánticos */
--ricettly-success: #2d7a4f;
--ricettly-success-bg: #edf7f2;
--ricettly-error: #C0392B; /* reutiliza brand — coherencia */
--ricettly-error-bg: #fdf2f1;
--ricettly-warning: #b97d10;
--ricettly-warning-bg: #fef9ec;
}
/* ─────────────────────────────────────────────
2. ROLES SEMÁNTICOS — lo que usan los componentes
Estos son los únicos tokens que debes referenciar
en app.css y en los estilos de componentes.
───────────────────────────────────────────── */
:root {
/* Superficies */
--color-bg: var(--ricettly-stone-2); /* fondo principal de la app */
--color-surface: var(--ricettly-stone-1); /* tarjetas, modales, nav */
--color-surface-alt: var(--ricettly-stone-0); /* input backgrounds, áreas blancas */
--color-surface-tint: var(--ricettly-red-1); /* hover muy suave en elementos de marca */
/* Bordes */
--color-border: var(--ricettly-stone-3); /* borde por defecto */
--color-border-strong:var(--ricettly-stone-4); /* borde en foco, separadores */
/* Texto */
--color-text: var(--ricettly-stone-8); /* texto primario */
--color-text-2: var(--ricettly-stone-6); /* texto secundario — metadatos, labels */
--color-text-3: var(--ricettly-stone-5); /* texto desactivado / placeholder */
--color-text-inverse: var(--ricettly-stone-0); /* texto sobre fondos oscuros/brand */
/* Marca */
--color-brand: var(--ricettly-red-4); /* botones primarios, links activos, badge */
--color-brand-hover: var(--ricettly-red-5); /* estado hover del brand */
--color-brand-subtle: var(--ricettly-red-1); /* fondo de tags de receta, chips */
--color-brand-text: var(--ricettly-red-4); /* texto en color marca sobre fondo claro */
/* Accent */
--color-accent: var(--ricettly-accent-4); /* nivel de gamificación, highlights */
--color-accent-hover: var(--ricettly-accent-5);
--color-accent-subtle:var(--ricettly-accent-1);
/* Estados semánticos */
--color-success: var(--ricettly-success);
--color-success-bg: var(--ricettly-success-bg);
--color-error: var(--ricettly-error);
--color-error-bg: var(--ricettly-error-bg);
--color-warning: var(--ricettly-warning);
--color-warning-bg: var(--ricettly-warning-bg);
}
/* ─────────────────────────────────────────────
3. TIPOGRAFÍA
───────────────────────────────────────────── */
:root {
/* Familias */
--font-display: 'Sora', system-ui, sans-serif; /* títulos, nombres de receta, hero */
--font-body: 'Inter', system-ui, sans-serif; /* todo el cuerpo de texto */
--font-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace; /* datos técnicos, código */
/* Escala tipográfica — basada en Open Props --font-size-N */
--text-xs: 0.75rem; /* 12px — labels pequeños, timestamps */
--text-sm: 0.875rem; /* 14px — texto secundario, metadata */
--text-base: 1rem; /* 16px — cuerpo de texto */
--text-md: 1.125rem; /* 18px — subtítulos */
--text-lg: 1.25rem; /* 20px — títulos de sección */
--text-xl: 1.5rem; /* 24px — títulos de tarjeta */
--text-2xl: 1.875rem; /* 30px — página title */
--text-3xl: 2.25rem; /* 36px — hero heading */
--text-4xl: 3rem; /* 48px — display grande (landing) */
/* Pesos */
--weight-normal: 400;
--weight-medium: 500;
--weight-semibold: 600;
/* Interlineado */
--leading-tight: 1.2; /* títulos grandes */
--leading-snug: 1.4; /* subtítulos */
--leading-base: 1.6; /* cuerpo — óptimo para legibilidad */
--leading-loose: 1.8; /* pasos de receta, instrucciones largas */
/* Espaciado entre letras */
--tracking-tight: -0.02em; /* títulos display grandes */
--tracking-base: 0;
--tracking-wide: 0.03em; /* labels de categoría */
}
/* ─────────────────────────────────────────────
4. ESPACIADO
Escala de 4px. Overrides los tokens de Open Props
para que todo el proyecto hable el mismo ritmo.
───────────────────────────────────────────── */
:root {
--space-1: 0.25rem; /* 4px */
--space-2: 0.5rem; /* 8px */
--space-3: 0.75rem; /* 12px */
--space-4: 1rem; /* 16px */
--space-5: 1.25rem; /* 20px */
--space-6: 1.5rem; /* 24px */
--space-8: 2rem; /* 32px */
--space-10: 2.5rem; /* 40px */
--space-12: 3rem; /* 48px */
--space-16: 4rem; /* 64px */
--space-20: 5rem; /* 80px */
--space-24: 6rem; /* 96px */
/* Aliases semánticos */
--gap-xs: var(--space-2); /* gap entre iconos e ítems muy juntos */
--gap-sm: var(--space-3); /* gap interno de componentes */
--gap-md: var(--space-4); /* gap entre elementos en fila */
--gap-lg: var(--space-6); /* gap entre secciones internas */
--gap-xl: var(--space-8); /* gap entre secciones de página */
--padding-card: var(--space-4); /* padding interno de tarjeta */
--padding-input: var(--space-3) var(--space-4);
--padding-btn-sm: var(--space-2) var(--space-4);
--padding-btn-md: var(--space-3) var(--space-6);
--padding-btn-lg: var(--space-4) var(--space-8);
--margin-section: var(--space-12); /* separación entre secciones grandes */
}
/* ─────────────────────────────────────────────
5. FORMA Y ELEVACIÓN
───────────────────────────────────────────── */
:root {
/* Border radius */
--radius-xs: 4px; /* badges, chips pequeños */
--radius-sm: 8px; /* inputs, botones pequeños */
--radius: 12px; /* ← BASE — tarjetas, botones, modales */
--radius-lg: 16px; /* tarjetas hero, imágenes */
--radius-xl: 20px; /* bottom sheets, drawers */
--radius-full: 9999px; /* avatares, pills */
/* Sombras (sistema de 4 niveles de elevación) */
--shadow-xs: 0 1px 2px rgba(28, 28, 30, 0.06); /* nav, inputs */
--shadow-sm: 0 1px 4px rgba(28, 28, 30, 0.08); /* elevación sutil */
--shadow-md: 0 4px 16px rgba(28, 28, 30, 0.12); /* ← tarjetas BASE */
--shadow-lg: 0 8px 32px rgba(28, 28, 30, 0.16); /* modales, dropdowns */
--shadow-xl: 0 16px 48px rgba(28, 28, 30, 0.20); /* bottom sheets */
--shadow-brand: 0 4px 16px rgba(192, 57, 43, 0.25); /* botón CTA en hover */
/* Bordes */
--border-width: 1px;
--border-default: var(--border-width) solid var(--color-border);
--border-strong: var(--border-width) solid var(--color-border-strong);
--border-brand: var(--border-width) solid var(--color-brand);
}
/* ─────────────────────────────────────────────
6. MOTION — overrides de Open Props
Consistencia con GSAP (usar los mismos easings)
───────────────────────────────────────────── */
:root {
/* Duraciones */
--duration-instant: 80ms;
--duration-fast: 150ms;
--duration-base: 220ms;
--duration-slow: 380ms;
--duration-slower: 600ms;
/* Easings — equivalentes CSS de los easings GSAP en uso */
--ease-out: cubic-bezier(0.0, 0, 0.2, 1); /* GSAP: "power2.out" */
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); /* GSAP: "power2.inOut" */
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* rebote suave — FAB, modales */
--ease-linear: linear;
/* Transiciones reutilizables */
--transition-colors: color var(--duration-fast) var(--ease-out),
background-color var(--duration-fast) var(--ease-out),
border-color var(--duration-fast) var(--ease-out);
--transition-transform: transform var(--duration-base) var(--ease-out);
--transition-shadow: box-shadow var(--duration-base) var(--ease-out);
--transition-all: all var(--duration-base) var(--ease-out);
}
/* ─────────────────────────────────────────────
7. LAYOUT — sistema de grilla
Compatible con el Full-Bleed Grid de la landing
───────────────────────────────────────────── */
:root {
--margin: clamp(1.25rem, 5vw, 6rem); /* margen lateral del viewport */
--content-max: 680px; /* ancho máximo de columna de texto */
--feed-max: 480px; /* ancho máximo del feed (móvil-first) */
--col-gap: var(--space-4);
/* Alturas funcionales */
--nav-height: 56px; /* navbar inferior en móvil */
--fab-size: 56px; /* botón FAB */
--avatar-sm: 32px;
--avatar-md: 44px;
--avatar-lg: 64px;
}
/* ─────────────────────────────────────────────
8. OVERRIDES DIRECTOS DE OPEN PROPS
Reescribe las variables de Open Props con
los valores de Ricettly para que cualquier
componente que consuma Open Props herede
la identidad correcta.
───────────────────────────────────────────── */
:root {
/* Open Props usa --red-6 como "red" por defecto */
--red-6: var(--ricettly-red-4);
--orange-6: var(--ricettly-accent-4);
/* Radius de Open Props */
--radius-2: var(--radius-sm);
--radius-3: var(--radius);
--radius-4: var(--radius-lg);
/* Sombras de Open Props */
--shadow-2: var(--shadow-sm);
--shadow-3: var(--shadow-md);
--shadow-4: var(--shadow-lg);
/* Fuentes de Open Props */
--font-sans: var(--font-body);
--font-serif: var(--font-display);
}
/* ─────────────────────────────────────────────
9. MODO OSCURO (base — para implementar)
Cuando el sistema operativo esté en dark mode,
las superficies y textos se invierten.
Los colores de marca NO cambian.
───────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
:root {
--color-bg: #1a1816;
--color-surface: #242220;
--color-surface-alt: #2e2b28;
--color-border: #3a3632;
--color-border-strong: #504b46;
--color-text: #f0ede8;
--color-text-2: #a8a39c;
--color-text-3: #6b6560;
--color-text-inverse: #1a1816;
/* La marca mantiene su color — ancla la identidad en dark mode */
--color-brand: var(--ricettly-red-4);
--color-brand-hover: var(--ricettly-red-3);
--color-brand-subtle: rgba(192, 57, 43, 0.15);
--shadow-md: 0 4px 16px rgba(0, 0, 0, 0.40);
--shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.50);
}
}
/* ─────────────────────────────────────────────
10. ACCESIBILIDAD
───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
:root {
--duration-fast: 0ms;
--duration-base: 0ms;
--duration-slow: 0ms;
--duration-slower: 0ms;
}
}