/* =============================================================================
   DOTCRAFT BASE — DESIGN TOKENS
   Variables CSS globales. Los child themes sobreescriben estas variables
   en su propio tokens.css para aplicar la identidad del cliente.

   REGLA: Este archivo define ESTRUCTURA, no identidad.
   Nunca poner aquí tipografías de marca, colores con personalidad,
   ni valores que pertenezcan a un cliente específico.
   ============================================================================= */

:root {

	/* ---------------------------------------------------------------------------
	   TIPOGRAFÍA — System stack. El child theme sobreescribe con Google Fonts.
	   --------------------------------------------------------------------------- */
	--dc-font-base:       system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	--dc-font-secondary:  system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	--dc-font-size-xs:    0.75rem;   /*  12px */
	--dc-font-size-sm:    0.875rem;  /*  14px */
	--dc-font-size-base:  1rem;      /*  16px */
	--dc-font-size-md:    1.125rem;  /*  18px */
	--dc-font-size-lg:    1.25rem;   /*  20px */
	--dc-font-size-xl:    1.5rem;    /*  24px */
	--dc-font-size-2xl:   2rem;      /*  32px */
	--dc-font-size-3xl:   2.5rem;    /*  40px */
	--dc-font-size-4xl:   3rem;      /*  48px */
	--dc-font-size-5xl:   4rem;      /*  64px */

	--dc-font-weight-light:    300;
	--dc-font-weight-regular:  400;
	--dc-font-weight-medium:   500;
	--dc-font-weight-semibold: 600;
	--dc-font-weight-bold:     700;
	--dc-font-weight-extrabold:800;

	--dc-line-height-tight:  1.2;
	--dc-line-height-snug:   1.35;
	--dc-line-height-base:   1.6;
	--dc-line-height-loose:  1.75;

	--dc-letter-spacing-tight: -0.02em;
	--dc-letter-spacing-base:   0;
	--dc-letter-spacing-wide:   0.04em;
	--dc-letter-spacing-wider:  0.08em;

	/* ---------------------------------------------------------------------------
	   COLORES — Neutros puros. Sin personalidad de marca.
	   El child theme sobreescribe con la paleta del cliente.
	   --------------------------------------------------------------------------- */
	--dc-black:     #1a1a1a;
	--dc-white:     #fafafa;
	--dc-surface:                   #ffffff;
	--dc-surface-container-low:     #f5f5f5;
	--dc-surface-container-highest: #e0e0e0;
	--dc-surface-container-lowest:  #ffffff;
	--dc-outline-variant:           #bbbbbb;

	/* ---------------------------------------------------------------------------
	   COLORES — Accent (neutros, sin personalidad)
	   --------------------------------------------------------------------------- */
	--dc-primary:     #555555;
	--dc-primary-dim: #444444;
	--dc-secondary:   #666666;
	--dc-tertiary:    #777777;

	/* ---------------------------------------------------------------------------
	   COLORES — Semánticos (child themes sobreescriben)
	   --------------------------------------------------------------------------- */
	--dc-color-bg:          var(--dc-surface);
	--dc-color-bg-alt:      var(--dc-surface-container-low);
	--dc-color-bg-card:     var(--dc-surface-container-lowest);
	--dc-color-text:        var(--dc-black);
	--dc-color-text-muted:  #6b6b6b;
	--dc-color-accent:      var(--dc-primary);
	--dc-color-accent-hover:var(--dc-primary-dim);
	--dc-color-border:      rgba(0, 0, 0, 0.1);

	/* ---------------------------------------------------------------------------
	   ESPACIADO
	   --------------------------------------------------------------------------- */
	--dc-space-1:   0.25rem;  /*  4px */
	--dc-space-2:   0.5rem;   /*  8px */
	--dc-space-3:   0.75rem;  /* 12px */
	--dc-space-4:   1rem;     /* 16px */
	--dc-space-5:   1.25rem;  /* 20px */
	--dc-space-6:   1.5rem;   /* 24px */
	--dc-space-8:   2rem;     /* 32px */
	--dc-space-10:  2.5rem;   /* 40px */
	--dc-space-12:  3rem;     /* 48px */
	--dc-space-16:  4rem;     /* 64px */
	--dc-space-20:  5rem;     /* 80px */
	--dc-space-24:  6rem;     /* 96px */
	--dc-space-32:  8rem;     /* 128px */

	/* ---------------------------------------------------------------------------
	   LAYOUT
	   --------------------------------------------------------------------------- */
	--dc-max-width:       1200px;
	--dc-max-width-wide:  1440px;
	--dc-max-width-text:   720px;
	--dc-gutter:            clamp(1rem, 5vw, 2rem);
	--dc-header-height:     72px;

	/* ---------------------------------------------------------------------------
	   BORDES Y RADIOS
	   --------------------------------------------------------------------------- */
	--dc-radius-sm:   4px;
	--dc-radius-md:   8px;
	--dc-radius-lg:  16px;
	--dc-radius-xl:  24px;
	--dc-radius-full:9999px;
	--dc-border:      1px solid var(--dc-color-border);

	/* ---------------------------------------------------------------------------
	   SOMBRAS
	   --------------------------------------------------------------------------- */
	--dc-shadow-ambient: rgba(0, 0, 0, 0.06);
	--dc-shadow-sm:  0 1px 3px var(--dc-shadow-ambient), 0 1px 2px var(--dc-shadow-ambient);
	--dc-shadow-md:  0 4px 6px var(--dc-shadow-ambient), 0 2px 4px var(--dc-shadow-ambient);
	--dc-shadow-lg:  0 10px 15px var(--dc-shadow-ambient), 0 4px 6px var(--dc-shadow-ambient);
	--dc-shadow-xl:  0 20px 40px var(--dc-shadow-ambient);

	/* ---------------------------------------------------------------------------
	   TRANSICIONES
	   --------------------------------------------------------------------------- */
	--dc-ease:         cubic-bezier(0.4, 0, 0.2, 1);
	--dc-ease-out:     cubic-bezier(0, 0, 0.2, 1);
	--dc-duration-fast:   150ms;
	--dc-duration-base:   250ms;
	--dc-duration-slow:   400ms;

	/* ---------------------------------------------------------------------------
	   STICKY HEADER
	   --------------------------------------------------------------------------- */
	--dc-header-sticky-bg:   rgba(255, 255, 255, 0.75);
	--dc-header-sticky-blur: 20px;

	/* ---------------------------------------------------------------------------
	   Z-INDEX
	   --------------------------------------------------------------------------- */
	--dc-z-base:    1;
	--dc-z-raised:  10;
	--dc-z-overlay: 20;
	--dc-z-modal:   30;
	--dc-z-header:  50;
	--dc-z-toast:   100;
}