/* ==========================================================================
   100PHOTOGRAPHERS — Design Tokens
   Fuente: guia-estilo.md (sistema "Monochrome Gallery")
   No hardcodear colores/tipografía/spacing fuera de estas variables.
   ========================================================================== */

:root {
  /* ---- Color: superficies ---- */
  --color-surface: #f9f9f9;
  --color-surface-dim: #dadada;
  --color-surface-bright: #f9f9f9;
  --color-surface-container-lowest: #ffffff;
  --color-surface-container-low: #f3f3f3;
  --color-surface-container: #eeeeee;
  --color-surface-container-high: #e8e8e8;
  --color-surface-container-highest: #e2e2e2;
  --color-on-surface: #1a1c1c;
  --color-on-surface-variant: #4c4546;
  --color-outline: #7e7576;
  --color-outline-variant: #cfc4c5;

  /* ---- Color: marca ---- */
  --color-primary: #000000;
  --color-on-primary: #ffffff;
  --color-primary-container: #1b1b1b;
  --color-on-primary-container: #848484;

  --color-secondary: #5e5e5e;
  --color-on-secondary: #ffffff;
  --color-secondary-container: #e3e2e2;
  --color-on-secondary-container: #646464;

  /* ---- Color: estado ---- */
  --color-error: #ba1a1a;
  --color-on-error: #ffffff;

  /* ---- Color: fondo global ---- */
  --color-background: #f9f9f9;
  --color-on-background: #1a1c1c;

  /* ---- Color: tokens de guía "Componentes" (project_brief + guia-estilo) ---- */
  --color-input-border: #e0e0e0;
  --color-input-fill: #f5f5f5;
  --color-chip-bg: #f5f5f5;
  --color-overlay-black-20: rgba(0, 0, 0, 0.2);

  /* ---- Tipografía ---- */
  --font-family-base: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --font-display-lg-size: 48px;
  --font-display-lg-weight: 600;
  --font-display-lg-line-height: 1.1;
  --font-display-lg-tracking: -0.02em;

  --font-display-lg-mobile-size: 32px;
  --font-display-lg-mobile-weight: 600;
  --font-display-lg-mobile-line-height: 1.2;
  --font-display-lg-mobile-tracking: -0.01em;

  /* Nombre de fotógrafo (H1 ficha individual) — project_brief.md 3.3 */
  --font-artist-name-size: 38px;
  --font-artist-name-weight: 600;

  /* Títulos de sección — project_brief.md 3.3 */
  --font-section-title-size: 22px;
  --font-section-title-weight: 600;

  --font-headline-md-size: 24px;
  --font-headline-md-weight: 500;
  --font-headline-md-line-height: 1.3;
  --font-headline-md-tracking: -0.01em;

  --font-body-lg-size: 18px;
  --font-body-lg-weight: 400;
  --font-body-lg-line-height: 1.6;

  --font-body-md-size: 16px;
  --font-body-md-weight: 400;
  --font-body-md-line-height: 1.5;

  --font-label-sm-size: 12px;
  --font-label-sm-weight: 600;
  --font-label-sm-line-height: 1.2;
  --font-label-sm-tracking: 0.05em;

  /* ---- Bordes redondeados ---- */
  --radius-sm: 0.25rem;   /* 4px */
  --radius-default: 0.5rem; /* 8px */
  --radius-md: 0.75rem;   /* 12px — botones y contenedores pequeños */
  --radius-lg: 1rem;      /* 16px — imágenes de grid, cards grandes */
  --radius-xl: 1.5rem;
  --radius-full: 9999px;  /* pill — botones primarios, chips */

  /* ---- Espaciado ---- */
  --space-base: 4px;
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 48px;
  --space-xl: 80px;
  --space-gutter: 24px;
  --space-margin-mobile: 10px;
  --space-margin-desktop: 64px;

  /* ---- Layout ---- */
  --layout-max-width: 1440px;
  --layout-columns-desktop: 12;
  --layout-columns-mobile: 4;
  /* Alto real del TopNavBar fijo (misma altura en desktop y móvil), para
     que todo lo que se posiciona "debajo del navbar" (megamenú, filter-bar,
     padding-top de página) lo siga automáticamente. */
  --navbar-height: 72px;

  /* ---- Elevación ---- */
  --shadow-ambient: 0px 10px 30px rgba(0, 0, 0, 0.04);
  --shadow-hover: 0px 16px 40px rgba(0, 0, 0, 0.08);
}