@tailwind base;
@tailwind components;
@tailwind utilities;

/* ---------------------------------------------------------------------------
   Tipografía de marca.
   Canela (titulares y cifras) y FH Oscar (texto) son fuentes comerciales:
   coloca los .woff2 en /public/fonts y se activan solos. Mientras tanto se
   usan Instrument Serif y Geist, cargadas en layout.tsx.
--------------------------------------------------------------------------- */
@font-face {
  font-family: 'Canela';
  src: url('/fonts/Canela-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'FH Oscar';
  src: url('/fonts/FHOscar-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'FH Oscar';
  src: url('/fonts/FHOscar-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-sans: 'FH Oscar', 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Canela', 'Instrument Serif', Georgia, serif;

  /* Marca */
  --midnight: #07101e;
  --orange: #ff5d00;
  --mint: #f0fcf0;
  --mist: #b1c3cd;

  /* Roles */
  --background: #f6f8f7;      /* lienzo, ligeramente frío */
  --card: #ffffff;
  --sidebar: var(--midnight);
  --border: #dce4e8;
  --brand: var(--orange);
  --foreground: var(--midnight);
  --muted: #5b6b78;           /* secundario teñido, no gris plano */
}

html {
  color-scheme: light;
}

body {
  background-color: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-feature-settings: 'ss01', 'cv11';
  min-height: 100vh;
  text-rendering: optimizeLegibility;
}

/* Trama de puntos del brandbook, apenas perceptible, sobre el lienzo */
.canvas-dots {
  background-image: radial-gradient(rgba(7, 16, 30, 0.07) 1px, transparent 1px);
  background-size: 22px 22px;
  background-position: 0 0;
}

/* Cifras y titulares en Canela */
.display {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.01em;
}

* {
  scrollbar-width: thin;
  scrollbar-color: var(--mist) transparent;
}

::selection {
  background: rgba(255, 93, 0, 0.22);
  color: var(--midnight);
}

:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
  border-radius: 8px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
}

input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="reset"]),
select,
textarea {
  color-scheme: light !important;
  color: var(--midnight);
}

/* Evitar que el autofill del navegador pinte campos en oscuro */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--midnight) !important;
  -webkit-box-shadow: 0 0 0px 1000px #ffffff inset !important;
  transition: background-color 5000s ease-in-out 0s;
}