/*
 * silkdrop_tokens.css — Design system SilkDrop (front_ROADMAP).
 * Fuente unica de tokens HSL. Cargar despues de main.css, antes de silkdrop_ui.css.
 *
 * Visual refresh home (2026-06-20): pairing editorial vendorizado local
 * (Fraunces display + Hanken Grotesk texto), tinta espresso cálida sobre papel
 * crema y escala/ritmo editorial. Las fuentes evitan el CDN de Google (bloqueado
 * en dev) y no agregan coste CSP (font-src 'self').
 */

/* ── Fuentes vendorizadas (subconjunto latin, woff2 · @fontsource) ─────────── */
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/fraunces-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Fraunces";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/fraunces-latin-400-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/fraunces-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/fraunces-latin-700-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/hanken-grotesk-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/hanken-grotesk-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/hanken-grotesk-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/hanken-grotesk-latin-700-normal.woff2") format("woff2");
}

:root {
  /* Paleta HSL (valores sin hsl() para composicion) — tinta espresso + papel crema */
  --sd-backdrop: 42deg 22% 97%;
  --sd-surface: 0deg 0% 100%;
  --sd-text-primary: 24deg 14% 12%;
  --sd-text-muted: 28deg 9% 40%;
  --sd-primary: 19deg 40% 34%;
  --sd-primary-hover: 18deg 45% 26%;
  --sd-accent: 34deg 52% 74%;
  --sd-success: 142deg 70% 30%;
  --sd-warning: 38deg 92% 50%;
  --sd-danger: 0deg 84% 50%;

  /* Tipografias — pairing editorial vendorizado (con fallbacks de sistema) */
  --sd-font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --sd-font-body: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Bordes y sombras */
  --sd-radius: 12px;
  --sd-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.02);
  --sd-shadow-md: 0 10px 30px rgba(0, 0, 0, 0.04);
  --sd-shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.08);

  /* === Editorial refresh (home) — escala, ritmo y superficies cálidas === */
  --sd-radius-lg: 20px;
  --sd-radius-xl: 28px;
  --sd-paper-warm: 38deg 40% 96%;
  --sd-paper-deep: 26deg 32% 92%;
  --sd-accent-deep: 28deg 48% 50%;
  --sd-shadow-soft: 0 14px 36px -16px hsl(24deg 35% 18% / 0.16);
  --sd-shadow-warm: 0 30px 70px -28px hsl(24deg 45% 16% / 0.28);
  --sd-display-1: clamp(2.6rem, 6.2vw, 4.5rem);
  --sd-display-2: clamp(1.9rem, 3.4vw, 2.85rem);
  --sd-lead: clamp(1.02rem, 1.1vw, 1.18rem);
  --sd-eyebrow: 0.72rem;
  --sd-section-y: clamp(3.25rem, 7vw, 6rem);

  /* Aliases legacy (silkdrop_ui.css existente) */
  --silkdrop-card-bg: hsl(var(--sd-surface));
  --silkdrop-card-border: hsl(var(--sd-text-primary) / 0.08);
  --silkdrop-shadow: var(--sd-shadow-md);
  --silkdrop-accent-strong: hsl(var(--sd-primary));
  --silkdrop-success: hsl(var(--sd-success));
  --silkdrop-warning: hsl(var(--sd-warning));
  --silkdrop-danger: hsl(var(--sd-danger));
  --silkdrop-muted: hsl(var(--sd-text-muted));
  --silkdrop-primary: hsl(var(--sd-primary));
  --silkdrop-primary-soft: hsl(var(--sd-primary) / 0.08);
  --silkdrop-text: hsl(var(--sd-text-primary));
  --silkdrop-surface: hsl(var(--sd-surface));

  /* Puente Bootstrap 5 (JS CDN) + overrides BS4 en main.css */
  --bs-primary: hsl(var(--sd-primary));
  --bs-primary-rgb: 119, 77, 58;
  --bs-body-bg: hsl(var(--sd-backdrop));
  --bs-body-color: hsl(var(--sd-text-primary));
  --bs-link-color: hsl(var(--sd-primary));
  --bs-link-hover-color: hsl(var(--sd-primary-hover));
  --bs-border-radius: var(--sd-radius);
  --bs-success: hsl(var(--sd-success));
  --bs-warning: hsl(var(--sd-warning));
  --bs-danger: hsl(var(--sd-danger));
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--sd-font-body);
  background-color: hsl(var(--sd-backdrop));
  color: hsl(var(--sd-text-primary));
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4,
.home-carousel__title {
  font-family: var(--sd-font-display);
  color: hsl(var(--sd-text-primary));
  line-height: 1.12;
  letter-spacing: -0.018em;
  text-wrap: balance;
}

::selection {
  background: hsl(var(--sd-accent) / 0.55);
  color: hsl(var(--sd-text-primary));
}

a {
  color: hsl(var(--sd-primary));
}

a:hover {
  color: hsl(var(--sd-primary-hover));
}

.btn-primary {
  --bs-btn-bg: hsl(var(--sd-primary));
  --bs-btn-border-color: hsl(var(--sd-primary));
  --bs-btn-hover-bg: hsl(var(--sd-primary-hover));
  --bs-btn-hover-border-color: hsl(var(--sd-primary-hover));
  --bs-btn-active-bg: hsl(var(--sd-primary-hover));
  --bs-btn-active-border-color: hsl(var(--sd-primary-hover));
  --bs-btn-disabled-bg: hsl(var(--sd-primary));
  --bs-btn-disabled-border-color: hsl(var(--sd-primary));
  background-color: hsl(var(--sd-primary));
  border-color: hsl(var(--sd-primary));
  color: hsl(var(--sd-surface));
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: hsl(var(--sd-primary-hover));
  border-color: hsl(var(--sd-primary-hover));
  color: hsl(var(--sd-surface));
}

.btn-outline-primary {
  --bs-btn-color: hsl(var(--sd-primary));
  --bs-btn-border-color: hsl(var(--sd-primary));
  --bs-btn-hover-bg: hsl(var(--sd-primary));
  --bs-btn-hover-border-color: hsl(var(--sd-primary));
  --bs-btn-active-bg: hsl(var(--sd-primary-hover));
  --bs-btn-active-border-color: hsl(var(--sd-primary-hover));
  color: hsl(var(--sd-primary));
  border-color: hsl(var(--sd-primary));
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
  background-color: hsl(var(--sd-primary));
  border-color: hsl(var(--sd-primary));
  color: hsl(var(--sd-surface));
}

.form-control:focus,
.form-select:focus {
  border-color: hsl(var(--sd-primary));
  box-shadow: 0 0 0 0.2rem hsl(var(--sd-primary) / 0.2);
}

.alert-success {
  --bs-alert-bg: hsl(var(--sd-success) / 0.12);
  --bs-alert-border-color: hsl(var(--sd-success) / 0.25);
  --bs-alert-color: hsl(var(--sd-success));
}

.alert-warning {
  --bs-alert-bg: hsl(var(--sd-warning) / 0.12);
  --bs-alert-border-color: hsl(var(--sd-warning) / 0.25);
  --bs-alert-color: hsl(var(--sd-warning));
}

.alert-danger {
  --bs-alert-bg: hsl(var(--sd-danger) / 0.12);
  --bs-alert-border-color: hsl(var(--sd-danger) / 0.25);
  --bs-alert-color: hsl(var(--sd-danger));
}

.text-muted {
  color: hsl(var(--sd-text-muted)) !important;
}