/* GALAHOME Design System — Core tokens
   Brand Foundation v1.0 (Abril 2026)
   Fonts copied locally; Google Fonts fallback declared below. */

@font-face {
  font-family: 'DM Serif Display';
  src: url('./fonts/dm-serif-display.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'DM Sans';
  src: url('./fonts/dm-sans-1.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('./fonts/dm-sans-2.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('./fonts/dm-sans-3.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ——— Brand palette ——— */
  --gh-azul-profundo: #0D2B5E;   /* Primario — confianza */
  --gh-violeta: #8A46CE;          /* Secundario — identidad */
  --gh-lavanda: #C4A8E8;          /* Complementario — fondos suaves */
  --gh-blanco-frio: #F4F7FA;      /* Base */
  --gh-gris-carbon: #1C1C1E;      /* Texto */
  --gh-white: #FFFFFF;

  /* Tints / shades (derived) */
  --gh-azul-900: #081B3E;
  --gh-azul-700: #0D2B5E;
  --gh-azul-500: #1F4A99;
  --gh-azul-300: #6D8CC4;
  --gh-violeta-900: #5E2E92;
  --gh-violeta-700: #8A46CE;
  --gh-violeta-500: #A877DE;
  --gh-violeta-300: #C4A8E8;
  --gh-violeta-100: #EFE6FA;
  --gh-gris-700: #3F3F46;
  --gh-gris-500: #6B7280;
  --gh-gris-300: #D1D5DB;
  --gh-gris-200: #E5E7EB;
  --gh-gris-100: #F3F4F6;

  /* Semantic */
  --gh-success: #16A34A;
  --gh-warning: #D97706;
  --gh-danger: #DC2626;
  --gh-info: var(--gh-azul-500);

  /* Surfaces */
  --gh-bg: var(--gh-blanco-frio);
  --gh-surface: #FFFFFF;
  --gh-surface-dark: var(--gh-azul-profundo);
  --gh-border: #E5E7EB;
  --gh-border-soft: var(--gh-violeta-100);

  /* Foreground */
  --gh-fg1: var(--gh-gris-carbon);       /* primary text */
  --gh-fg2: #4B5563;                     /* secondary text */
  --gh-fg3: #6B7280;                     /* tertiary / captions */
  --gh-fg-on-dark: #FFFFFF;
  --gh-fg-on-dark-muted: rgba(255,255,255,0.72);

  /* Fonts */
  --gh-font-serif: 'DM Serif Display', 'Playfair Display', Georgia, 'Times New Roman', serif;
  --gh-font-sans: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --gh-font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Type scale (px) */
  --gh-size-h1: 60px;
  --gh-size-h2: 40px;
  --gh-size-h3: 24px;
  --gh-size-h4: 20px;
  --gh-size-body: 16px;
  --gh-size-body-sm: 14px;
  --gh-size-small: 12px;
  --gh-size-button: 14px;

  /* Line heights */
  --gh-lh-display: 1.1;
  --gh-lh-heading: 1.2;
  --gh-lh-body: 1.6;

  /* Spacing (4px base) */
  --gh-space-1: 4px;
  --gh-space-2: 8px;
  --gh-space-3: 12px;
  --gh-space-4: 16px;
  --gh-space-5: 20px;
  --gh-space-6: 24px;
  --gh-space-8: 32px;
  --gh-space-10: 40px;
  --gh-space-12: 48px;
  --gh-space-16: 64px;
  --gh-space-20: 80px;

  /* Radii */
  --gh-radius-xs: 4px;
  --gh-radius-sm: 8px;
  --gh-radius-md: 12px;
  --gh-radius-lg: 16px;
  --gh-radius-xl: 24px;
  --gh-radius-pill: 999px;

  /* Shadows */
  --gh-shadow-xs: 0 1px 2px rgba(13, 43, 94, 0.04);
  --gh-shadow-sm: 0 1px 3px rgba(13, 43, 94, 0.06), 0 1px 2px rgba(13, 43, 94, 0.04);
  --gh-shadow-md: 0 4px 12px rgba(13, 43, 94, 0.08);
  --gh-shadow-lg: 0 12px 32px rgba(13, 43, 94, 0.12);
  --gh-shadow-xl: 0 24px 48px rgba(13, 43, 94, 0.16);
  --gh-shadow-violet: 0 8px 24px rgba(138, 70, 206, 0.22);

  /* Motion */
  --gh-ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
  --gh-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --gh-dur-fast: 150ms;
  --gh-dur-base: 220ms;
  --gh-dur-slow: 400ms;

  /* Layout */
  --gh-container: 1200px;
  --gh-container-narrow: 960px;
}

/* ——— Base reset-ish ——— */
html, body { background: var(--gh-bg); color: var(--gh-fg1); }
body { font-family: var(--gh-font-sans); font-size: var(--gh-size-body); line-height: var(--gh-lh-body); -webkit-font-smoothing: antialiased; }

/* ——— Semantic type classes ——— */
.gh-display, .gh-h1 {
  font-family: var(--gh-font-serif);
  font-size: var(--gh-size-h1);
  line-height: var(--gh-lh-display);
  color: var(--gh-azul-profundo);
  letter-spacing: -0.01em;
  font-weight: 400;
}
.gh-h2 {
  font-family: var(--gh-font-serif);
  font-size: var(--gh-size-h2);
  line-height: var(--gh-lh-heading);
  color: var(--gh-azul-profundo);
  font-weight: 400;
}
.gh-h3 {
  font-family: var(--gh-font-sans);
  font-size: var(--gh-size-h3);
  line-height: 1.3;
  color: var(--gh-azul-profundo);
  font-weight: 700;
}
.gh-h4 {
  font-family: var(--gh-font-sans);
  font-size: var(--gh-size-h4);
  font-weight: 700;
  color: var(--gh-azul-profundo);
}
.gh-p, p.gh-p {
  font-family: var(--gh-font-sans);
  font-size: var(--gh-size-body);
  color: var(--gh-fg2);
  line-height: var(--gh-lh-body);
}
.gh-small {
  font-size: var(--gh-size-small);
  color: var(--gh-fg3);
  letter-spacing: 0.02em;
}
.gh-eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gh-violeta);
}
.gh-quote {
  font-family: var(--gh-font-serif);
  font-size: 28px;
  line-height: 1.35;
  color: var(--gh-azul-profundo);
  font-style: italic;
}

/* ——— Buttons (reference) ——— */
.gh-btn {
  font-family: var(--gh-font-sans);
  font-size: var(--gh-size-button);
  font-weight: 500;
  padding: 12px 20px;
  border-radius: var(--gh-radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background var(--gh-dur-base) var(--gh-ease-standard),
              color var(--gh-dur-base) var(--gh-ease-standard),
              box-shadow var(--gh-dur-base) var(--gh-ease-standard),
              transform var(--gh-dur-fast) var(--gh-ease-standard);
}
.gh-btn-primary {
  background: var(--gh-azul-profundo);
  color: #fff;
}
.gh-btn-primary:hover { background: #081B3E; }
.gh-btn-primary:active { transform: translateY(1px); }
.gh-btn-secondary {
  background: transparent;
  color: var(--gh-azul-profundo);
  border-color: #C4A8E8;
}
.gh-btn-secondary:hover { background: var(--gh-blanco-frio); border-color: var(--gh-azul-profundo); }
.gh-btn-ghost {
  background: transparent;
  color: var(--gh-azul-profundo);
}
.gh-btn-ghost:hover { background: var(--gh-blanco-frio); }

.gh-btn-accent {
  background: var(--gh-violeta);
  color: #fff;
}
.gh-btn-accent:hover { background: var(--gh-violeta-900); }