/**
 * FcTheme - Football Green Edition
 * Paleta genérica para equipo de fútbol (verde institucional)
 */

:root {
  /* Base */
  --background: oklch(0.98 0.01 140);
  --foreground: oklch(0.22 0.04 150);

  /* Cards */
  --card: oklch(0.96 0.02 140);
  --card-foreground: oklch(0.25 0.05 150);

  /* Primary - Verde institucional */
  --primary: oklch(0.62 0.18 145);
  --primary-foreground: oklch(0.98 0.01 140);

  /* Secondary - Verde césped claro */
  --secondary: oklch(0.88 0.08 145);
  --secondary-foreground: oklch(0.28 0.05 150);

  /* Muted */
  --muted: oklch(0.94 0.02 140);
  --muted-foreground: oklch(0.45 0.04 150);

  /* Accent - Verde vibrante (botones, hover, badges) */
  --accent: oklch(0.70 0.22 150);
  --accent-foreground: oklch(0.98 0.01 140);

  /* Destructive - Rojo tarjeta */
  --destructive: oklch(0.65 0.23 25);
  --destructive-foreground: oklch(0.98 0 0);

  /* Borders & inputs */
  --border: oklch(0.85 0.03 145);
  --input: oklch(0.85 0.03 145);

  /* Typography */
  --font-sans: "Outfit", "Helvetica Neue", Arial, Helvetica, sans-serif;
  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  --font-mono: "Fira Mono", "Menlo", "Consolas", "Liberation Mono", monospace;

  /* UI */
  --radius: 0.6rem;
  --shadow-opacity: 0.12;

  --shadow-2xs: 0 1px 3px 1px hsl(120 30% 20% / 0.05);
  --shadow-xs: 0 1px 3px 1px hsl(120 30% 20% / 0.08);
  --shadow-sm: 0 2px 4px -1px hsl(120 30% 20% / 0.12);
  --shadow: 0 3px 6px -2px hsl(120 30% 20% / 0.14);
  --shadow-md: 0 4px 8px -2px hsl(120 30% 20% / 0.16);
  --shadow-lg: 0 6px 12px -3px hsl(120 30% 20% / 0.18);
  --shadow-xl: 0 8px 16px -4px hsl(120 30% 20% / 0.2);
  --shadow-2xl: 0 10px 20px -5px hsl(120 30% 20% / 0.22);

  --spacing: 0.25rem;

  --navbar-height: calc(var(--spacing) * 15);

  @media (min-width: 768px) {
    --navbar-height: calc(var(--spacing) * 18);
  }
}

/* ========================= */
/* Dark Mode - Estadio Night */
/* ========================= */

.dark {
  --background: oklch(0.20 0.04 150);
  --foreground: oklch(0.95 0.02 140);

  --card: oklch(0.25 0.05 150);
  --card-foreground: var(--foreground);

  --primary: oklch(0.65 0.20 145);
  --primary-foreground: oklch(0.15 0.03 150);

  --secondary: oklch(0.35 0.07 150);
  --secondary-foreground: oklch(0.95 0.02 140);

  --muted: oklch(0.30 0.05 150);
  --muted-foreground: oklch(0.85 0.03 140);

  --accent: oklch(0.72 0.24 150);
  --accent-foreground: oklch(0.15 0.03 150);

  --destructive: oklch(0.68 0.25 25);
  --destructive-foreground: oklch(0.98 0 0);

  --border: oklch(0.40 0.05 150);
  --input: oklch(0.40 0.05 150);

  --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.08);
  --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.1);
  --shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.15);
  --shadow: 0 2px 4px -1px hsl(0 0% 0% / 0.18);
  --shadow-md: 0 3px 6px -1px hsl(0 0% 0% / 0.2);
  --shadow-lg: 0 6px 10px -2px hsl(0 0% 0% / 0.22);
  --shadow-xl: 0 8px 14px -3px hsl(0 0% 0% / 0.24);
  --shadow-2xl: 0 12px 18px -4px hsl(0 0% 0% / 0.26);
}