@import url(https://fonts.bunny.net/css?family=figtree:300,400,500,600);

:root {
  /* === Paleta Marina - Empresa Pesquera === */
  /* Inspirada en el océano: sky (azul cielo/océano), teal (acentos), slate (grises azulados) */

  /* Fondos y superficies - Slate (grises con tinte azulado) */
  --color-bg: light-dark(var(--slate-50), var(--slate-950));
  --color-surface: light-dark(white, var(--slate-900));

  /* Texto - Slate */
  --color-text: light-dark(var(--slate-900), var(--slate-50));
  --color-text-reversed: light-dark(white, var(--slate-900));
  --color-text-subtle: light-dark(var(--slate-500), var(--slate-400));

  /* Enlaces - Sky (azul cielo) */
  --color-link: light-dark(var(--sky-700), var(--sky-500));
  --color-link-hover: light-dark(var(--sky-800), var(--sky-400));

  /* Bordes - Slate */
  --color-border-light: light-dark(var(--slate-100), var(--slate-800));
  --color-border: light-dark(var(--slate-200), var(--slate-700));
  --color-border-dark: light-dark(var(--slate-400), var(--slate-600));

  /* Selección y highlight */
  --color-selected: light-dark(var(--sky-100), var(--sky-950));
  --color-selected-dark: light-dark(var(--sky-300), var(--sky-800));
  --color-highlight: light-dark(var(--amber-200), var(--amber-900));

  /* Primarios - Sky (azul cielo/océano, profesional y reconocible) */
  --color-primary: light-dark(var(--sky-700), var(--sky-200));
  --color-primary-hover: light-dark(var(--sky-800), var(--sky-300));
  --color-primary-subtle: light-dark(var(--sky-50), var(--sky-950));

  /* Secundarios - Slate */
  --color-secondary: light-dark(var(--slate-100), var(--slate-800));

  /* Estados semánticos */
  --color-negative: light-dark(var(--red-600), var(--red-400));
  --color-positive: light-dark(var(--emerald-600), var(--emerald-500));
}

* {
  border-color: var(--color-border);
  scrollbar-color: #C1C1C1 transparent;
  scrollbar-width: thin;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-synthesis-weight: none;
  overscroll-behavior: none;
  text-rendering: optimizeLegibility;
  font-family: 'Figtree', sans-serif;
}

.turbo-progress-bar {
  background-color: var(--color-primary);
}

::selection {
  background-color: var(--color-selected);
  color: var(--color-text);
}