/* ─────────────────────────────────────────────────────────────────────
   Kalia App — Colors & Type
   Source: welook-io/casadei-logistica · src/app/globals.css
   Brand: Kalia (platform) + per-tenant accent customization
   ───────────────────────────────────────────────────────────────────── */

/* Fonts — Geist Sans + Geist Mono (variable fonts, self-hosted) */
@font-face {
  font-family: "Geist";
  src: url("fonts/Geist-Variable.ttf") format("truetype-variations"),
       url("fonts/Geist-Variable.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: url("fonts/Geist-Italic_wght_.ttf") format("truetype-variations"),
       url("fonts/Geist-Italic_wght_.ttf") format("truetype");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("fonts/GeistMono-Variable.ttf") format("truetype-variations"),
       url("fonts/GeistMono-Variable.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("fonts/GeistMono-Italic_wght_.ttf") format("truetype-variations"),
       url("fonts/GeistMono-Italic_wght_.ttf") format("truetype");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ── Font stacks ────────────────────────────────────────────────── */
  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Monaco,
               Consolas, "Liberation Mono", monospace;

  /* ── Neutral surface palette (oklch-derived, see globals.css) ───── */
  --background:        oklch(1 0 0);              /* #ffffff */
  --foreground:        oklch(0.145 0 0);          /* near-black */
  --card:              oklch(1 0 0);
  --card-foreground:   oklch(0.145 0 0);
  --popover:           rgba(10, 10, 10, 0.92);    /* topbar/menu backdrop */
  --popover-foreground:#ffffff;
  --primary:           oklch(0.205 0 0);          /* neutral-900 */
  --primary-foreground:oklch(0.985 0 0);
  --secondary:         oklch(0.97 0 0);           /* neutral-50 */
  --muted:             oklch(0.97 0 0);
  --muted-foreground:  oklch(0.556 0 0);          /* neutral-500 */
  --accent:            oklch(0.97 0 0);
  --destructive:       oklch(0.577 0.245 27.325); /* red-600 */
  --border:            oklch(0.922 0 0);          /* neutral-200 */
  --input:             oklch(0.922 0 0);
  --ring:              oklch(0.708 0 0);          /* neutral-400 */

  /* ── Neutral grayscale (Tailwind neutral-*) ─────────────────────── */
  --neutral-50:  #fafafa;
  --neutral-100: #f5f5f5;
  --neutral-200: #e5e5e5;
  --neutral-300: #d4d4d4;
  --neutral-400: #a3a3a3;
  --neutral-500: #737373;
  --neutral-600: #525252;
  --neutral-700: #404040;
  --neutral-800: #262626;
  --neutral-900: #171717;
  --neutral-950: #0a0a0a;

  /* ── Brand accent (Kalia lila oscuro — single accent across UI) ─── */
  --brand:     #5B3FD1;
  --brand-50:  #F5F0FF;
  --brand-100: #EBDFFE;
  --brand-200: #D5BEFC;
  --brand-300: #B596F8;
  --brand-400: #936FF0;
  --brand-500: #7549E5;
  --brand-600: #5B3FD1;
  --brand-700: #4732AB;
  --brand-800: #36268A;
  --brand-900: #211851;
  --brand-ink: #0E0738;       /* near-black violet — for deep gradients */
  --brand-glow:rgba(91, 63, 209, 0.40);
  --brand-glow-soft: rgba(91, 63, 209, 0.18);

  /* ── Semantic state colors (used in tipo-viaje icons + badges) ──── */
  --state-info-fg:    #0284c7;  /* sky-600 (químico) */
  --state-info-bg:    #f0f9ff;  /* sky-50  */
  --state-info-ring:  #bae6fd;  /* sky-200 */

  --state-success-fg: #047857;  /* emerald-700 (espiga / activo) */
  --state-success-bg: #ecfdf5;  /* emerald-50 */
  --state-success-ring:#a7f3d0; /* emerald-200 */

  --state-warn-fg:    #d97706;  /* amber-600 (girasol / pendiente) */
  --state-warn-bg:    #fffbeb;  /* amber-50 */
  --state-warn-ring:  #fde68a;  /* amber-200 */

  --state-warn-row:   rgba(254, 243, 199, 0.4); /* amber-100 @ 40% (row tint) */
  --state-active-tint:rgba(91, 63, 209, 0.06); /* shimmer over active rows */

  --state-danger-fg:  #dc2626;  /* red-600 */
  --state-danger-bg:  #fef2f2;  /* red-50 */
  --state-danger-ring:#fecaca;  /* red-200 */

  /* ── Radii ──────────────────────────────────────────────────────── */
  --radius:    0.625rem;                       /* 10px — cards, buttons base */
  --radius-sm: calc(var(--radius) - 4px);      /* 6px  — chips, small buttons */
  --radius-md: calc(var(--radius) - 2px);      /* 8px  — inputs, dropdowns */
  --radius-lg: var(--radius);                  /* 10px */
  --radius-xl: calc(var(--radius) + 4px);      /* 14px — topbar, panels */
  --radius-2xl:1rem;                           /* 16px — Carmela panel */
  --radius-full:9999px;

  /* ── Spacing scale (Tailwind 4 derived) ─────────────────────────── */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ── Shadows ────────────────────────────────────────────────────── */
  --shadow-xs:  0 1px 2px 0 rgba(0,0,0,0.04);
  --shadow-sm:  0 1px 3px 0 rgba(0,0,0,0.08), 0 1px 2px -1px rgba(0,0,0,0.04);
  --shadow-md:  0 4px 6px -1px rgba(0,0,0,0.08), 0 2px 4px -2px rgba(0,0,0,0.04);
  --shadow-lg:  0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -4px rgba(0,0,0,0.04);
  --shadow-xl:  0 20px 25px -5px rgba(0,0,0,0.10), 0 8px 10px -6px rgba(0,0,0,0.05);
  --shadow-2xl: 0 25px 50px -12px rgba(0,0,0,0.25);
  --shadow-topbar: 0 4px 16px rgba(0,0,0,0.2), 0 1px 4px rgba(0,0,0,0.1);
  --shadow-menu:   0 4px 16px rgba(0,0,0,0.3), 0 16px 48px rgba(0,0,0,0.2);

  /* ── Layout containers ──────────────────────────────────────────── */
  --container-max: 1024px;     /* max-w-5xl — body content */
  --topbar-max:    1024px;     /* max-w-5xl — topbar capsule */
  --topbar-h:      44px;       /* h-11 */
  --topbar-top:    12px;       /* top-3 */
  --topbar-radius: 12px;       /* rounded-xl */
}

/* ─────────────────────────────────────────────────────────────────────
   Type tokens — sizes match the Casadei codebase (compact, data-dense)
   ───────────────────────────────────────────────────────────────────── */
:root {
  --fs-9:   9px;    /* text-[9px]  — admin pills */
  --fs-10:  10px;   /* text-[10px] — table eyebrows, micro-meta */
  --fs-11:  11px;
  --fs-12:  12px;   /* text-xs     — secondary text, nav items */
  --fs-13:  13px;
  --fs-14:  14px;   /* text-sm     — body, table cells, buttons */
  --fs-16:  16px;   /* text-base */
  --fs-18:  18px;   /* text-lg */
  --fs-20:  20px;
  --fs-24:  24px;   /* text-2xl */
  --fs-30:  30px;   /* text-3xl */
  --fs-36:  36px;   /* text-4xl    — hero h1 */
  --fs-48:  48px;   /* text-5xl    — hero h1 (md+) */
}

/* ─────────────────────────────────────────────────────────────────────
   Semantic typography (use as classes)
   ───────────────────────────────────────────────────────────────────── */
body, .body {
  font-family: var(--font-sans);
  font-size: var(--fs-14);
  line-height: 1.5;
  color: var(--neutral-900);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.005em;
}

.h-hero {       /* Page hero — “Bienvenido a tu Kalia App” */
  font-family: var(--font-sans);
  font-size: var(--fs-36);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--neutral-900);
}
@media (min-width: 768px) {
  .h-hero { font-size: var(--fs-48); }
}

.h-section {    /* "Flota en operación ahora" — section header */
  font-family: var(--font-sans);
  font-size: var(--fs-14);
  font-weight: 500;
  color: var(--neutral-900);
  letter-spacing: -0.005em;
}

.h-page {       /* Module page title */
  font-family: var(--font-sans);
  font-size: var(--fs-20);
  font-weight: 600;
  color: var(--neutral-900);
  letter-spacing: -0.015em;
}

.eyebrow {      /* uppercase tracking-wider 10px — table heads, "Propios" tag */
  font-family: var(--font-sans);
  font-size: var(--fs-10);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--neutral-500);
}

.body-sm {
  font-family: var(--font-sans);
  font-size: var(--fs-12);
  color: var(--neutral-500);
  line-height: 1.5;
}

.body-xs {
  font-family: var(--font-sans);
  font-size: var(--fs-10);
  color: var(--neutral-400);
  letter-spacing: 0.01em;
}

.label-field { /* "Cliente", "Tipo de viaje" — field label above inputs */
  font-family: var(--font-sans);
  font-size: var(--fs-10);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--neutral-500);
}

.mono, .num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* ─────────────────────────────────────────────────────────────────────
   Brand utilities (mirror Tailwind utilities from globals.css)
   ───────────────────────────────────────────────────────────────────── */
.text-brand     { color: var(--brand); }
.text-brand-600 { color: var(--brand-600); }
.text-brand-700 { color: var(--brand-700); }
.bg-brand       { background-color: var(--brand); }
.bg-brand-50    { background-color: var(--brand-50); }
.bg-brand-100   { background-color: var(--brand-100); }
.bg-brand-600   { background-color: var(--brand-600); }
.border-brand   { border-color: var(--brand); }
.border-brand-200 { border-color: var(--brand-200); }

/* ─────────────────────────────────────────────────────────────────────
   Signature animations (Kalia motion vocabulary)
   ───────────────────────────────────────────────────────────────────── */
@keyframes fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}
@keyframes row-active-shimmer {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}
@keyframes carmela-halo {
  0%, 100% { box-shadow: 0 0 0 0 rgba(91, 63, 209, 0.45); }
  50%      { box-shadow: 0 0 0 10px rgba(91, 63, 209, 0); }
}
@keyframes carmela-wiggle {
  0%, 100% { transform: scale(1) rotate(0); }
  15% { transform: scale(1.08) rotate(-10deg); }
  35% { transform: scale(1.12) rotate(8deg); }
  55% { transform: scale(1.06) rotate(-4deg); }
  75% { transform: scale(1.02) rotate(2deg); }
}
.animate-pulse-dot { animation: pulse-dot 2s ease-in-out infinite; }
.row-state-active {
  background-image: linear-gradient(115deg,
    var(--state-active-tint) 0%,
    rgba(255,255,255,0) 35%,
    rgba(255,255,255,0) 65%,
    var(--state-active-tint) 100%);
  background-size: 220% 220%;
  animation: row-active-shimmer 9s ease-in-out infinite;
}
.row-state-pending { background-color: var(--state-warn-row); }