/* SS Deco & Designs - Design Tokens
 *
 * Este archivo centraliza los valores visuales globales.
 *
 * IMPORTANTE:
 * Cambiar un valor aqui puede afectar a varios componentes.
 * No anadir estilos de componentes en este archivo.
 */

:root {
  /* Paleta principal */
  --ss-graphite: #141416;
  --ss-graphite-soft: #1D1D20;
  --ss-ivory: #F3EEE6;
  --ss-pleam: #744052;
  --ss-warm-gray: #CFC7BF;
  --ss-white: #FFFFFF;

  /* Texto */
  --ss-text: var(--ss-graphite);
  --ss-text-muted: #6F6B68;
  --ss-text-inverse: var(--ss-ivory);

  /* Superficies */
  --ss-bg: var(--ss-ivory);
  --ss-surface: #FFFFFF;
  --ss-surface-dark: var(--ss-graphite);

  /* Bordes */
  --ss-border: rgba(20, 20, 22, 0.12);
  --ss-border-light: rgba(243, 238, 230, 0.14);

  /* Accent */
  --ss-accent: var(--ss-pleam);

  /* Radios */
  --ss-radius-sm: 6px;
  --ss-radius-md: 12px;
  --ss-radius-lg: 20px;

  /* Sombras */
  --ss-shadow-sm: 0 4px 14px rgba(20, 20, 22, 0.06);
  --ss-shadow-md: 0 12px 30px rgba(20, 20, 22, 0.10);

  /* Contenedores */
  --ss-content: 760px;
  --ss-wide: 1290px;
  --ss-gutter: clamp(18px, 4vw, 48px);

  /* Espaciado */
  --ss-space-1xs: 4px;
  --ss-space-xs: 8px;
  --ss-space-sm: 12px;
  --ss-space-md: 20px;
  --ss-space-lg: 32px;
  --ss-space-xl: 48px;
  --ss-space-2xl: 72px;
  --ss-space-3xl: 96px;

  /* Tipografia */
  --ss-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --ss-font-base: 16px;
  --ss-line-height: 1.6;

  /* Transiciones */
  --ss-transition-fast: 160ms ease;
  --ss-transition: 220ms ease;
}