/* GRIGNƎN × bruX — variables.css — v1.0.0
   Exportación nominal de tokens.json. Especificación de diseño, NO interfaz implementada.
   No contiene @font-face ni archivos tipográficos de terceros. */

:root {
  /* COLORES · identidad GRIGNƎN × bruX */
  --color-canvas: #0C0C0E;
  --color-graphite: #19191F;
  --color-panel: #232329;
  --color-interactive: #2C2C33;
  --color-ivory: #F1EEE9;
  --color-stone: #BEB8AF;
  --color-ash: #A6A5A9;
  --color-divider: #3D3E45;
  --color-border-strong: #73737D;
  --color-magenta: #D01879;
  --color-magenta-text: #FF77B4;
  --color-on-magenta: #FFFFFF;
  --color-photography-fallback: #292621;

  /* FAMILIAS · instalar por separado si existen derechos */
  --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: "Manrope", "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* PESOS */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;

  /* TIPOGRAFÍA · roles compuestos */
  --text-eyebrow: 12px;
  --leading-eyebrow: 1.35;
  --tracking-eyebrow: 0.10em;
  --weight-eyebrow: 500;
  --typeface-eyebrow: var(--font-body);
  --text-caption: 12px;
  --leading-caption: 1.45;
  --tracking-caption: 0.015em;
  --weight-caption: 400;
  --typeface-caption: var(--font-body);
  --text-label: 13px;
  --leading-label: 1.4;
  --tracking-label: 0.025em;
  --weight-label: 500;
  --typeface-label: var(--font-body);
  --text-body-sm: 14px;
  --leading-body-sm: 1.55;
  --tracking-body-sm: 0em;
  --weight-body-sm: 400;
  --typeface-body-sm: var(--font-body);
  --text-body: 16px;
  --leading-body: 1.55;
  --tracking-body: 0em;
  --weight-body: 400;
  --typeface-body: var(--font-body);
  --text-lead: 18px;
  --leading-lead: 1.5;
  --tracking-lead: 0em;
  --weight-lead: 400;
  --typeface-lead: var(--font-body);
  --text-subheading: 24px;
  --leading-subheading: 1.25;
  --tracking-subheading: 0.005em;
  --weight-subheading: 500;
  --typeface-subheading: var(--font-display);
  --text-heading-sm: 30px;
  --leading-heading-sm: 1.22;
  --tracking-heading-sm: 0.005em;
  --weight-heading-sm: 500;
  --typeface-heading-sm: var(--font-display);
  --text-heading: 42px;
  --leading-heading: 1.16;
  --tracking-heading: 0.005em;
  --weight-heading: 500;
  --typeface-heading: var(--font-display);
  --text-display: 64px;
  --leading-display: 1.1;
  --tracking-display: 0.005em;
  --weight-display: 500;
  --typeface-display: var(--font-display);
  --text-display-mobile: 40px;
  --leading-display-mobile: 1.14;
  --tracking-display-mobile: 0.005em;
  --weight-display-mobile: 500;
  --typeface-display-mobile: var(--font-display);

  /* ESPACIADO · unidad de 4px */
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-64: 64px;
  --spacing-72: 72px;
  --spacing-96: 96px;
  --spacing-128: 128px;
  --spacing-unit: 4px;

  /* RADIOS */
  --radius-default: 4px;
  --radius-small: 8px;
  --radius-card: 12px;
  --radius-panel: 16px;
  --radius-pill: 999px;
  --radius-none: 0px;

  /* RETÍCULA Y RITMO */
  --layout-page-max: 1440px;
  --layout-content-max: 1240px;
  --layout-gutter-desktop: 48px;
  --layout-gutter-mobile: 20px;
  --layout-section-gap: 96px;
  --layout-section-gap-mobile: 64px;
  --layout-card-padding: 32px;
  --layout-card-padding-mobile: 20px;
  --layout-element-gap: 12px;
  --layout-breakpoint-mobile-max: 767px;
  --layout-breakpoint-tablet-max: 1023px;

  /* SUPERFICIES · alias semánticos */
  --surface-base: var(--color-canvas);
  --surface-project: var(--color-graphite);
  --surface-relation: var(--color-panel);
  --surface-control: var(--color-interactive);
  --surface-image-reserve: var(--color-photography-fallback);

  /* ESTADOS · alias semánticos */
  --state-active-marker: var(--color-magenta);
  --state-active-text: var(--color-magenta-text);
  --state-completed-text: var(--color-ivory);
  --state-pending-text: var(--color-ash);
  --state-focus-outline: var(--color-magenta-text);

  /* MEDIDAS DE COMPONENTES */
  --component-hero-min-height: 640px;
  --component-hero-title-max: 980px;
  --component-photo-split-min: 44%;
  --component-project-rail-width: 360px;
  --component-line-weight: 1px;
  --component-active-line-weight: 2px;
  --component-focus-ring-weight: 2px;

  /* DURACIONES */
  --motion-fast: 160ms;
  --motion-normal: 260ms;
  --motion-slow: 420ms;

  /* PROPORCIONES DE IMAGEN */
  --media-hero-aspect-ratio: 16 / 9;
  --media-project-aspect-ratio: 4 / 3;
  --media-document-aspect-ratio: 3 / 4;

}

/* Contrato de uso responsive — NO implementa componentes. 
   En estilos futuros, usar breakpoints explícitos: 767px y 1023px.
   No colocar var(--layout-breakpoint-*) dentro de @media (no se resuelve allí).
   Pantallas reducidas: emplear --text-display-mobile, --layout-gutter-mobile,
   --layout-section-gap-mobile, --layout-card-padding-mobile.
   Prefers-reduced-motion: reducir transiciones a 0ms cuando se implemente.
*/