/* ============================================================================
   CAHUN BARBERÍA — DESIGN TOKENS (fuente unica de verdad)
   Cambiar un valor aqui propaga a TODO: showcase, demo del sitio, emails, PDFs.
   Paleta canonica = PDF oficial de paleta (02 Paleta de colores). Los tokens
   marcados [DERIVADO] no venian en la paleta; se anadieron para poder operar un
   sitio con tema claro (crema) y oscuro (azul noche). Si tienes un hex oficial
   para ellos, cambialo aqui.
   Identidad por Jessica Duran (c) 2024. Atributos: calma, carisma, confianza,
   pulcritud, profesionalismo, elegancia.
   ============================================================================ */

/* -- FUENTES DE MARCA (auto-hospedadas) --------------------------------- */
@font-face {
  font-family: 'Canopee';
  src: url('fonts/Canopee-Regular.woff2') format('woff2'),
       url('fonts/Canopee-Regular.otf') format('opentype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Editorial New';
  src: url('fonts/EditorialNew-Regular.otf') format('opentype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Editorial New';
  src: url('fonts/EditorialNew-Italic.otf') format('opentype');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Editorial New';
  src: url('fonts/EditorialNew-Ultrabold.otf') format('opentype');
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Handoek';
  src: url('fonts/Handoek.woff2') format('woff2'),
       url('fonts/Handoek.woff') format('woff');
  font-weight: 400 700; font-style: normal; font-display: swap;
}

:root {
  /* -- MARCA (canonico, del PDF de paleta) ------------------------------ */
  --rootbeer:    #20090A;   /* marron casi negro (calido): texto, fondos intimos */
  --sienna:      #3D1412;   /* marron vino oscuro: superficie calida / acento tierra */
  --koamaru:     #204F9A;   /* AZUL DE MARCA: acento noble, CTAs, links, letreros */
  --azure:       #457CBF;   /* azul claro: acento secundario, hover, bordes vivos */
  --timberwolf:  #DED9CF;   /* crema calida: superficie clara y texto sobre oscuro */

  /* -- MARCA (derivados para operar) ------------------------------------ */
  --koamaru-deep:#1A3E7A;   /* [DERIVADO] hover/pressed del azul CTA */
  --koamaru-ink: #122143;   /* [DERIVADO] fondo de pagina en tema oscuro (azul noche) */
  --koamaru-800: #1B2C52;   /* [DERIVADO] superficie oscura (cards en oscuro) */
  --koamaru-700: #26386A;   /* [DERIVADO] superficie elevada / hover en oscuro */
  --azure-bright:#6E99D0;   /* [DERIVADO] hover del azure sobre fondo oscuro */
  --cream-100:   #EFEBE3;   /* [DERIVADO] card clara (mas clara que --timberwolf) */
  --cream-050:   #F7F4EE;   /* [DERIVADO] superficie elevada clara / blanco calido */
  --muted-warm:  #6E5F54;   /* [DERIVADO] texto secundario sobre crema (AA ~5:1) */
  --muted-cool:  #9AA3BC;   /* [DERIVADO] texto secundario sobre azul oscuro (AA) */

  /* -- TOKENS SEMANTICOS (theme-aware) ---------------------------------- *
   * Pintar SIEMPRE con estos, nunca con un hex fijo (CR-05). El DEFAULT es
   * CLARO (crema), fiel al brandboard luminoso. En oscuro se sobreescriben
   * abajo en [data-theme="dark"].                                          */
  --bg:          var(--timberwolf);   /* fondo de pagina (crema de marca) */
  --surface:     var(--cream-100);    /* cards / superficies (mas claro que --bg) */
  --surface-2:   var(--cream-050);    /* superficie elevada / hover */
  --surface-warm:var(--sienna);       /* banda calida puntual (seccion "intima") */
  --text:        var(--rootbeer);     /* texto principal */
  --text-muted:  var(--muted-warm);   /* texto secundario */
  --accent:      var(--koamaru);      /* acento de marca (links, eyebrows, CTA) */
  --accent-2:    var(--azure);        /* acento secundario (bordes vivos, detalles) */
  --accent-hover:var(--koamaru-deep);
  --on-accent:   var(--cream-050);    /* texto/icono SOBRE el azul de acento */
  --border:      rgba(32,9,10,.16);   /* hairline calido (divisores, cards) */
  --border-strong:var(--koamaru);     /* borde enfatico de marca (azul) */
  --border-soft: rgba(32,9,10,.10);   /* divisor muy tenue */
  --overlay:     rgba(18,15,12,.5);   /* fondo de modales / drawers */

  /* -- TIPOGRAFIA ------------------------------------------------------- */
  --font-display: 'Canopee', 'Playfair Display', Georgia, serif;          /* hero, titulos display */
  --font-serif:   'Editorial New', 'Times New Roman', Georgia, serif;     /* lectura, lead, precios */
  --font-label:   'Handoek', 'Arial Narrow', Helvetica, sans-serif;       /* labels, botones, nav, eyebrows */
  --font-body:    var(--font-serif);                                       /* cuerpo = Editorial New */

  --weight-body:  400;
  --weight-strong:800;      /* Editorial New Ultrabold */
  --weight-label: 700;
  --tracking-label:   .14em;   /* labels en mayuscula: aire elegante */
  --tracking-display: .005em;  /* los serif display respiran apenas */

  /* Escala tipografica (fluida) */
  --text-display-lg: clamp(44px, 7.5vw, 88px); /* hero H1 */
  --text-display-md: clamp(28px, 4vw, 40px);   /* H2 de seccion */
  --text-display-sm: 22px;                      /* H3 / nombre de servicio */
  --text-label:      13px;                      /* botones, tags, nav */
  --text-body:       17px;                       /* parrafo */
  --text-body-sm:    14px;                       /* meta, notas, duracion */
  --leading-body:    1.65;
  --leading-tight:   1.08;

  /* -- FORMA (elegante: esquinas suaves) -------------------------------- */
  --radius:       6px;    /* CR-04: redondeo sutil en cards, inputs, imagenes */
  --radius-sm:    4px;
  --radius-lg:    16px;   /* bloques grandes, heroes */
  --radius-pill:  999px;  /* botones, tags, chips: pastilla limpia */
  --border-width: 1px;    /* linea fina = pulcritud */
  --border-strong-w: 1.5px; /* borde de marca enfatico (placa, destacados) */

  /* -- ESPACIADO (base 4px, CR-11) -------------------------------------- */
  --space-xs:  8px;
  --space-sm:  16px;
  --space-md:  24px;
  --space-lg:  40px;
  --space-xl:  72px;
  --space-2xl: 96px;
  --container: 1200px;
  --container-pad: 24px;      /* movil */
  --container-pad-lg: 40px;   /* desktop */

  /* -- ELEVACION (sombra suave y calida, CR-07) ------------------------- *
   * Cahun define profundidad por contraste de superficie (closer=lighter) +
   * sombra SUAVE y calida, difusa, no dura. Elegancia serena, no deportiva.  */
  --shadow-sm: 0 1px 2px rgba(32,9,10,.07);
  --shadow-md: 0 10px 30px -12px rgba(32,9,10,.18);
  --shadow-lg: 0 28px 60px -20px rgba(32,9,10,.26);
  --shadow-focus: 0 0 0 3px rgba(32,79,154,.30);  /* anillo de foco (azul) */

  /* -- MOVIMIENTO (un solo easing, CR-19) ------------------------------- */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --dur-fast: .18s;
  --dur:      .34s;
  --dur-slow: .6s;

  /* -- MOTIF (patrones de marca oficiales, CR-16) ----------------------- */
  --corner-color: var(--accent);   /* color de los corchetes de la "placa" */
  --corner-len:   22px;            /* largo de cada brazo del corchete */
  --corner-thick: 1.5px;           /* grosor del corchete */
  --corner-inset: 10px;            /* separacion del borde */
  --stripe-color: var(--accent-2); /* lineas diagonales (guino de barberia) */
  --stripe-opacity: .06;
  --stripe-angle: -60deg;
}

/* ============================================================================
   MODO OSCURO (azul noche) — portada nocturna, secciones de contraste, hero.
   Se activa con data-theme="dark" en <html> o en un contenedor.
   El DEFAULT del sistema es CLARO; el oscuro es el alterno de marca.
   ============================================================================ */
[data-theme="dark"] {
  --bg:          var(--koamaru-ink);   /* azul noche recesado */
  --surface:     var(--koamaru-800);   /* card azul, mas clara que el bg */
  --surface-2:   var(--koamaru-700);   /* superficie elevada / hover */
  --surface-warm:var(--rootbeer);      /* banda calida (aun mas intima en oscuro) */
  --text:        var(--timberwolf);
  --text-muted:  var(--muted-cool);
  --accent:      var(--azure);         /* en oscuro el acento de texto sube a azure (AA) */
  --accent-2:    var(--azure-bright);
  --accent-hover:var(--azure-bright);
  --on-accent:   var(--koamaru-ink);
  --border:      rgba(222,217,207,.18);
  --border-strong:var(--azure);
  --border-soft: rgba(222,217,207,.10);
  --overlay:     rgba(8,10,20,.6);
  --corner-color:var(--azure);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.3);
  --shadow-md: 0 12px 30px -12px rgba(0,0,0,.5);
  --shadow-lg: 0 28px 60px -20px rgba(0,0,0,.6);
  --shadow-focus: 0 0 0 3px rgba(69,124,191,.45);
}

/* Impresion = SIEMPRE claro (CR-20). El papel es crema/blanco; no gastar tinta
   en fondos azules. Fuerza los tokens claros aunque la pantalla este en oscuro. */
@media print {
  :root, [data-theme="dark"] {
    --bg: #FFFFFF; --surface: #FFFFFF; --surface-2: #F7F4EE; --surface-warm: #EFEBE3;
    --text: #20090A; --text-muted: #5A4E45;
    --accent: #204F9A; --accent-2: #204F9A; --on-accent: #FFFFFF;
    --border: rgba(32,9,10,.25); --border-strong: #204F9A; --border-soft: rgba(32,9,10,.14);
    color-scheme: light;
  }
}

/* ============================================================================
   MOTIFS — decorativos oficiales (SIEMPRE discretos). Ver CR-16.
   1) .cahun-corners  — los corchetes de la PLACA (la firma: placa grabada,
      navaja, variaciones del logo). Enmarca heroes, cards o secciones.
   2) .cahun-stripes  — lineas diagonales finas (guino de barberia), SIEMPRE
      detras del contenido, NUNCA sobre texto denso ni sobre cards.
   ============================================================================ */

/* Motif "Corners" (placa) — 4 corchetes en las esquinas, CSS puro, escalable. */
.cahun-corners { position: relative; }
.cahun-corners::before {
  content: ""; position: absolute; inset: var(--corner-inset);
  pointer-events: none; z-index: 1;
  background:
    linear-gradient(var(--corner-color),var(--corner-color)) 0 0      / var(--corner-len) var(--corner-thick) no-repeat,
    linear-gradient(var(--corner-color),var(--corner-color)) 0 0      / var(--corner-thick) var(--corner-len) no-repeat,
    linear-gradient(var(--corner-color),var(--corner-color)) 100% 0   / var(--corner-len) var(--corner-thick) no-repeat,
    linear-gradient(var(--corner-color),var(--corner-color)) 100% 0   / var(--corner-thick) var(--corner-len) no-repeat,
    linear-gradient(var(--corner-color),var(--corner-color)) 0 100%   / var(--corner-len) var(--corner-thick) no-repeat,
    linear-gradient(var(--corner-color),var(--corner-color)) 0 100%   / var(--corner-thick) var(--corner-len) no-repeat,
    linear-gradient(var(--corner-color),var(--corner-color)) 100% 100%/ var(--corner-len) var(--corner-thick) no-repeat,
    linear-gradient(var(--corner-color),var(--corner-color)) 100% 100%/ var(--corner-thick) var(--corner-len) no-repeat;
}

/* Motif "Stripes" — lineas diagonales finas (barberia), muy sutiles. */
.cahun-stripes {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  opacity: var(--stripe-opacity);
  background-image: repeating-linear-gradient(
    var(--stripe-angle),
    var(--stripe-color) 0 1px,
    transparent 1px 14px
  );
}