/* ============================================================
   Design System — Motor & Ruedas
   Todas las variables CSS derivadas del design system "High-Performance Editorial"
   ============================================================ */
:root {
	/* --- Colores primarios --- */
	--color-primary:                   #a93200;
	--color-on-primary:                #ffffff;
	--color-primary-container:         #d1430a;
	--color-on-primary-container:      #fffbff;
	--color-primary-fixed:             #ffdbd0;
	--color-primary-fixed-dim:         #ffb59e;
	--color-inverse-primary:           #ffb59e;

	/* --- Colores secundarios --- */
	--color-secondary:                 #476083;
	--color-on-secondary:              #ffffff;
	--color-secondary-container:       #bdd6ff;
	--color-on-secondary-container:    #445d80;
	--color-secondary-fixed:           #d4e3ff;
	--color-secondary-fixed-dim:       #afc8f0;

	/* --- Colores terciarios --- */
	--color-tertiary:                  #00628f;
	--color-on-tertiary:               #ffffff;
	--color-tertiary-container:        #007cb4;
	--color-on-tertiary-container:     #fcfcff;
	--color-tertiary-fixed:            #cae6ff;
	--color-tertiary-fixed-dim:        #8ccdff;

	/* --- Superficie --- */
	--color-background:                #fff8f6;
	--color-on-background:             #261814;
	--color-surface:                   #fff8f6;
	--color-surface-dim:               #efd4cd;
	--color-surface-bright:            #fff8f6;
	--color-surface-container-lowest:  #ffffff;
	--color-surface-container-low:     #fff1ed;
	--color-surface-container:         #ffe9e3;
	--color-surface-container-high:    #fee2da;
	--color-surface-container-highest: #f8ddd5;
	--color-surface-variant:           #f8ddd5;
	--color-surface-tint:              #ad3300;

	/* --- Texto --- */
	--color-on-surface:                #261814;
	--color-on-surface-variant:        #5a4139;
	--color-inverse-surface:           #3d2d28;
	--color-inverse-on-surface:        #ffede8;

	/* --- Bordes --- */
	--color-outline:                   #8e7067;
	--color-outline-variant:           #e2bfb4;

	/* --- Error --- */
	--color-error:                     #ba1a1a;
	--color-on-error:                  #ffffff;
	--color-error-container:           #ffdad6;
	--color-on-error-container:        #93000a;

	/* --------------------------------------------------------
	   Tipografía
	   -------------------------------------------------------- */
	--font-family:              'Archivo Narrow', sans-serif;

	--font-size-caption:        12px;
	--font-size-label:          14px;
	--font-size-body-md:        16px;
	--font-size-body-lg:        18px;
	--font-size-headline-md:    24px;
	--font-size-headline-lg:    32px;
	--font-size-display-mobile: 36px;
	--font-size-display:        48px;

	--font-weight-regular:  400;
	--font-weight-semibold: 600;
	--font-weight-bold:     700;

	--line-height-tight:   1.1;
	--line-height-snug:    1.2;
	--line-height-normal:  1.3;
	--line-height-relaxed: 1.5;
	--line-height-loose:   1.6;

	--letter-spacing-tight: -0.02em;
	--letter-spacing-label:  0.05em;
	--letter-spacing-wide:   0.1em;

	/* --------------------------------------------------------
	   Espaciado
	   -------------------------------------------------------- */
	--spacing-xs:             4px;
	--spacing-sm:             8px;
	--spacing-md:             16px;
	--spacing-lg:             24px;
	--spacing-xl:             48px;
	--spacing-gutter:         20px;
	--spacing-margin-mobile:  16px;
	--spacing-margin-desktop: 64px;
	--max-width:              1280px;

	/* --------------------------------------------------------
	   Border Radius
	   -------------------------------------------------------- */
	--radius-sm:   0.125rem;
	--radius:      0.25rem;
	--radius-md:   0.375rem;
	--radius-lg:   0.5rem;
	--radius-full: 9999px;

	/* --------------------------------------------------------
	   Sombras
	   -------------------------------------------------------- */
	--shadow-card: 0 4px 20px rgba(0, 0, 0, 0.05);
	--shadow-md:   0 4px 8px  rgba(0, 0, 0, 0.08);

	/* --------------------------------------------------------
	   Z-index
	   -------------------------------------------------------- */
	--z-header: 50;
	--z-modal:  100;
}