/*
 * Mi Barrio Beverley Barbershop — design tokens
 *
 * Copied verbatim from handoff/02-design-system/design-tokens.css (v3).
 * Every declaration below is byte-identical to the handoff. Do not edit values
 * here; the handoff is the source of truth and CLAUDE.md forbids a second
 * token system or approximating a token with a literal value.
 *
 * The original file's header comment was written in Spanish and referenced
 * "uploads/logo-beverly.png" — the forbidden spelling. Only that comment is
 * replaced by this one. Recorded in DEVIATIONS.md.
 *
 * Fonts: Cinzel (display) + Instrument Sans (body/UI), both SIL OFL. The woff2
 * files are not yet present; the documented fallbacks apply until Gate 3.
 */
:root {
  /* Fondos */
  --color-bg-primary: #0B0A08;        /* carbon del emblema — base del sitio (oscuro-primero) */
  --color-bg-secondary: #14120E;      /* superficie oscura alterna */
  --color-bg-raised: #1C1913;         /* paneles, tarjetas sobre oscuro */
  --color-bg-light: #F5F1E4;          /* crema del emblema — secciones claras */
  --color-bg-light-2: #ECE6D3;        /* superficie clara alterna */
  --color-overlay-scrim: rgba(11, 10, 8, 0.78);

  /* Texto */
  --color-text-primary: #F5F1E4;
  --color-text-secondary: #B9B29F;
  --color-text-muted: #8C8574;        /* solo meta >=14px */
  --color-text-on-light: #1C1810;
  --color-text-secondary-on-light: #6A6250;

  /* Marca — oros del logo */
  --color-gold: #D9A852;              /* oro medio del lettering — acento sobre oscuro */
  --color-gold-bright: #F0C878;       /* hover / brillo */
  --color-gold-highlight: #FDE591;    /* solo detalles finos (reglas, iconos) */
  --color-gold-deep: #8A6524;         /* oro profundo — texto/trazos sobre claro */
  --color-gold-shadow: #A87830;       /* sombra del oro — bordes, estados presionados */
  --color-pole-red: #B03A28;          /* rojo de poste — detalle <=5%, nunca fondos grandes */

  /* Bordes */
  --color-border-dark: #2A2519;
  --color-border-dark-strong: #3D3625;
  --color-border-light: #DAD2BC;
  --color-border-light-strong: #C4BBA0;

  /* Semanticos (claro / sobre-oscuro) */
  --color-success: #4E7A5A;           --color-success-on-dark: #8FB897;
  --color-warning: #A97B24;           --color-warning-on-dark: #D9A84E;
  --color-error: #A9432F;             --color-error-on-dark: #E08573;
  --color-info: #4E6E8C;              --color-info-on-dark: #93B4CE;
  --color-focus-ring-dark: #F0C878;
  --color-focus-ring-light: #8A6524;

  /* Tipografia */
  --font-display: "Cinzel", "Cinzel Fallback", "Trajan Pro", Georgia, serif;
  --font-body: "Instrument Sans", "Instrument Sans Fallback", "Helvetica Neue", Arial, sans-serif;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* Escala fluida */
  --text-display-xl: clamp(2.5rem, 1.5rem + 4.5vw, 5.5rem);
  --text-display-l: clamp(2.125rem, 1.45rem + 3vw, 4rem);
  --text-h1: clamp(1.875rem, 1.5rem + 1.8vw, 3rem);
  --text-h2: clamp(1.5rem, 1.3rem + 1.1vw, 2.25rem);
  --text-h3: clamp(1.25rem, 1.15rem + 0.55vw, 1.5rem);
  --text-h4: 1.125rem;
  --text-h5: 1rem;
  --text-body-lg: 1.125rem;
  --text-body: 1rem;
  --text-body-sm: 0.875rem;
  --text-caption: 0.75rem;
  --text-label: 0.6875rem;
  --text-quote: clamp(1.375rem, 1.15rem + 1.1vw, 1.875rem);
  --text-price: 1.125rem;

  --leading-display: 1.12;            /* Cinzel necesita mas aire que una serif de texto */
  --leading-heading: 1.2;
  --leading-subhead: 1.3;
  --leading-body: 1.6;
  --leading-tight: 1.4;

  --tracking-display: 0.02em;
  --tracking-caps: 0.16em;
  --tracking-caps-wide: 0.28em;
  --tracking-nav: 0.14em;
  --tracking-descriptor: 0.34em;

  /* Espaciado */
  --space-1: 0.25rem;  --space-2: 0.5rem;   --space-3: 0.75rem;
  --space-4: 1rem;     --space-5: 1.5rem;   --space-6: 2rem;
  --space-7: 3rem;     --space-8: 4rem;     --space-9: 6rem;
  --space-10: 8rem;    --space-11: 10rem;   --space-12: 12rem;
  --space-section: clamp(4.5rem, 3rem + 7vw, 9rem);
  --space-section-sm: clamp(3rem, 2.25rem + 3.5vw, 5.5rem);

  /* Contenedores / reticula / breakpoints */
  --container-default: 80rem;
  --container-wide: 90rem;
  --container-content: 65rem;
  --container-narrow: 45rem;
  --container-margin-desktop: 4rem;
  --container-margin-tablet: 2.5rem;
  --container-margin-mobile: 1.25rem;
  --grid-columns-desktop: 12;
  --grid-columns-tablet: 6;
  --grid-columns-mobile: 4;
  --grid-gutter-desktop: 2rem;
  --grid-gutter-tablet: 1.5rem;
  --grid-gutter-mobile: 1rem;
  --breakpoint-sm: 480px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1440px;

  /* Radios / bordes */
  --radius-none: 0;
  --radius-sm: 2px;
  --radius-pill: 999px;
  --border-hairline: 1px;
  --border-emphasis: 2px;

  /* Sombras */
  --shadow-raised: 0 24px 48px -24px rgba(0, 0, 0, 0.55);
  --shadow-modal: 0 32px 80px -16px rgba(0, 0, 0, 0.65);
  --shadow-header-dark: 0 1px 0 rgba(245, 241, 228, 0.12);
  --shadow-header-light: 0 1px 0 #DAD2BC;
  --glow-gold: 0 0 40px rgba(217, 168, 82, 0.18);   /* solo letrero/hero, nunca botones */

  /* Z-index */
  --z-base: 0; --z-dropdown: 40; --z-sticky-header: 50; --z-overlay: 60; --z-modal: 70; --z-toast: 80;

  /* Movimiento */
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 450ms;
  --duration-reveal: 700ms;
  --ease-out-soft: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);

  /* Metricas */
  --icon-sm: 16px; --icon-md: 20px; --icon-lg: 24px; --icon-xl: 32px;
  --touch-target-min: 44px;
  --touch-target-comfortable: 48px;
  --header-height-desktop: 88px;
  --header-height-scrolled: 64px;
  --header-height-mobile: 64px;
  --button-height-sm: 40px;
  --button-height-md: 48px;
  --button-height-lg: 56px;
  --form-control-height: 52px;
}