@layer base {
  @font-face {
    font-family: "Arandu Sans";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: local("Inter Variable"), local("Inter");
  }

  @font-face {
    font-family: "Arandu Mono";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: local("JetBrains Mono Variable"), local("JetBrains Mono");
  }

  :root {
    color-scheme: dark;

    /* ----------------------------------------------------------------- */
    /* Paleta primitiva oficial — negro + naranja premium (dark-first).  */
    /* Fuente unica de verdad; los tokens semanticos referencian estos.  */
    /* No usar primitivos directo en componentes: usar los semanticos.   */
    /* ----------------------------------------------------------------- */

    /* Neutros calidos (negro -> off-white) */
    --arandu-ink-950: #0a0908;
    --arandu-ink-900: #121110;
    --arandu-ink-850: #1a1714;
    --arandu-ink-800: #231f1a;
    --arandu-ink-700: #2e2922;
    --arandu-ink-600: #3d362c;
    --arandu-ink-500: #5a5145;
    --arandu-ink-400: #8a7e6e;
    --arandu-ink-300: #b0a492;
    --arandu-ink-100: #e9e3d8;
    --arandu-ink-50: #f7f3ec;

    /* Naranja de marca / accion */
    --arandu-orange-50: #fff3ea;
    --arandu-orange-100: #ffe1cc;
    --arandu-orange-200: #ffc299;
    --arandu-orange-300: #ff9f5e;
    --arandu-orange-400: #ff7a2e;
    --arandu-orange-500: #ff5a1f;
    --arandu-orange-600: #e8470f;
    --arandu-orange-700: #c2410c;
    --arandu-orange-800: #9a3412;
    --arandu-orange-900: #7a2e0e;
    --arandu-orange-950: #431407;

    /* Ambar / oro — lujo, glow, sello Premium (nunca accion) */
    --arandu-amber-400: #ffb347;
    --arandu-gold-300: #ffd27a;

    /* Hues semanticos (estado) */
    --arandu-green-400: #3dd68c;
    --arandu-green-950: #0e2a1e;
    --arandu-green-700: #1b5e45;
    --arandu-yellow-400: #ffcc33;
    --arandu-yellow-950: #2c2410;
    --arandu-yellow-700: #7a5e12;
    --arandu-red-400: #f4555b;
    --arandu-red-950: #2e1214;
    --arandu-red-700: #7a1f24;
    --arandu-blue-400: #5aa9ff;
    --arandu-blue-950: #0e1f33;
    --arandu-blue-700: #1d4e7a;
    --arandu-teal-400: #2dd4bf;
    --arandu-violet-400: #a78bfa;

    /* ----------------------------------------------------------------- */
    /* Tokens semanticos — lo que consumen los componentes.              */
    /* ----------------------------------------------------------------- */
    --arandu-color-background: var(--arandu-ink-950);
    --arandu-color-primary: var(--arandu-orange-500);
    --arandu-color-primary-hover: var(--arandu-orange-400);
    --arandu-color-primary-foreground: var(--arandu-ink-950);
    --arandu-color-accent: var(--arandu-amber-400);
    --arandu-color-surface: var(--arandu-ink-900);
    --arandu-color-surface-raised: var(--arandu-ink-850);
    --arandu-color-surface-muted: var(--arandu-ink-800);
    --arandu-color-border: var(--arandu-ink-700);
    --arandu-color-border-strong: var(--arandu-ink-600);
    --arandu-color-text: var(--arandu-ink-100);
    --arandu-color-text-muted: var(--arandu-ink-300);
    --arandu-color-text-subtle: var(--arandu-ink-400);
    --arandu-color-success: var(--arandu-green-400);
    --arandu-color-success-surface: var(--arandu-green-950);
    --arandu-color-warning: var(--arandu-yellow-400);
    --arandu-color-warning-surface: var(--arandu-yellow-950);
    --arandu-color-error: var(--arandu-red-400);
    --arandu-color-error-surface: var(--arandu-red-950);
    --arandu-color-info: var(--arandu-blue-400);
    --arandu-color-info-surface: var(--arandu-blue-950);
    /* Estados de interaccion */
    --arandu-color-primary-active: var(--arandu-orange-600);
    --arandu-color-text-disabled: var(--arandu-ink-500);
    --arandu-color-scrim: rgb(10 9 8 / 0.56);

    /* ----------------------------------------------------------------- */
    /* Elevacion — sombras con negro calido (no slate)                  */
    /* ----------------------------------------------------------------- */
    --arandu-shadow-0: none;
    --arandu-shadow-1: 0 1px 2px rgb(10 9 8 / 0.6);
    --arandu-shadow-2: 0 2px 8px rgb(10 9 8 / 0.5);
    --arandu-shadow-3: 0 12px 30px rgb(10 9 8 / 0.5);
    --arandu-shadow-4: 0 24px 60px rgb(10 9 8 / 0.55);
    /* Inner highlight superior para efecto "vidrio" en cards */
    --arandu-highlight-top: inset 0 1px 0 rgb(247 243 236 / 0.05);
    /* Glow — firma premium; solo foco, activo y superficies Premium */
    --arandu-glow-primary: 0 0 0 1px rgb(255 90 31 / 0.4), 0 0 16px rgb(255 90 31 / 0.35);
    --arandu-glow-accent: 0 0 16px rgb(255 179 71 / 0.35);

    /* ----------------------------------------------------------------- */
    /* Motion                                                            */
    /* ----------------------------------------------------------------- */
    --arandu-duration-fast: 120ms;
    --arandu-duration-base: 200ms;
    --arandu-duration-slow: 320ms;
    --arandu-ease-enter: cubic-bezier(0.2, 0.8, 0.2, 1);
    --arandu-ease-exit: cubic-bezier(0.4, 0, 1, 1);
    --arandu-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);

    /* ----------------------------------------------------------------- */
    /* z-index — escala nombrada                                         */
    /* ----------------------------------------------------------------- */
    --arandu-z-dropdown: 1000;
    --arandu-z-sticky: 1100;
    --arandu-z-overlay: 1200;
    --arandu-z-modal: 1300;
    --arandu-z-toast: 1400;

    /* ----------------------------------------------------------------- */
    /* Data-viz — categorica (derivada de marca), secuencial y umbral   */
    /* ----------------------------------------------------------------- */
    --arandu-chart-1: var(--arandu-orange-500);
    --arandu-chart-2: var(--arandu-amber-400);
    --arandu-chart-3: var(--arandu-teal-400);
    --arandu-chart-4: var(--arandu-blue-400);
    --arandu-chart-5: var(--arandu-violet-400);
    --arandu-chart-6: var(--arandu-green-400);
    /* Rampa secuencial (oscuro -> incandescente) para uso/heatmaps */
    --arandu-seq-1: var(--arandu-orange-950);
    --arandu-seq-2: var(--arandu-orange-800);
    --arandu-seq-3: var(--arandu-orange-600);
    --arandu-seq-4: var(--arandu-orange-500);
    --arandu-seq-5: var(--arandu-orange-300);

    /* ----------------------------------------------------------------- */
    /* Iconografia (lucide)                                              */
    /* ----------------------------------------------------------------- */
    --arandu-icon-sm: 16px;
    --arandu-icon-md: 20px;
    --arandu-icon-lg: 24px;
    --arandu-icon-stroke: 1.5;

    /* ----------------------------------------------------------------- */
    /* Tipografia                                                        */
    /* ----------------------------------------------------------------- */
    --arandu-font-sans:
      "Arandu Sans", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
      sans-serif;
    --arandu-font-mono:
      "Arandu Mono", "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
      monospace;
    /* Escala modular ratio 1.200 (tercera menor) */
    --arandu-font-size-xs: 0.75rem;
    --arandu-font-size-sm: 0.875rem;
    --arandu-font-size-md: 1rem;
    --arandu-font-size-lg: 1.125rem;
    --arandu-font-size-xl: 1.25rem;
    --arandu-font-size-2xl: 1.5rem;
    --arandu-font-size-3xl: 1.875rem;
    --arandu-font-size-4xl: 2.25rem;
    --arandu-font-weight-regular: 400;
    --arandu-font-weight-medium: 500;
    --arandu-font-weight-semibold: 600;
    --arandu-font-weight-bold: 700;
    --arandu-font-numeric: tabular-nums;
    --arandu-font-tracking-ui: var(--arandu-tracking-normal);
    --arandu-font-tracking-label: var(--arandu-tracking-normal);
    --arandu-line-height-display: 1.2;
    --arandu-line-height-tight: 1.25;
    --arandu-line-height-normal: 1.5;
    /* Tracking: negativo sutil en titulos, normal en texto */
    --arandu-tracking-tight: -0.02em;
    --arandu-tracking-snug: -0.01em;
    --arandu-tracking-normal: 0;

    /* ----------------------------------------------------------------- */
    /* Espaciado — base 4px, alineado a 8pt                              */
    /* ----------------------------------------------------------------- */
    --arandu-space-0: 0;
    --arandu-space-1: 0.25rem;
    --arandu-space-2: 0.5rem;
    --arandu-space-3: 0.75rem;
    --arandu-space-4: 1rem;
    --arandu-space-5: 1.25rem;
    --arandu-space-6: 1.5rem;
    --arandu-space-8: 2rem;
    --arandu-space-10: 2.5rem;
    --arandu-space-12: 3rem;
    --arandu-space-16: 4rem;

    /* ----------------------------------------------------------------- */
    /* Radios                                                            */
    /* ----------------------------------------------------------------- */
    --arandu-radius-sm: 0.375rem;
    --arandu-radius-md: 0.5rem;
    --arandu-radius-lg: 0.75rem;
    --arandu-radius-xl: 1rem;
    --arandu-radius-full: 9999px;

    --arandu-focus-ring: var(--arandu-orange-400);
    --arandu-focus-offset: 2px;
    --arandu-density-control-height: 2.5rem;
    --arandu-density-hit-target: 2.75rem;
    --arandu-density-table-cell-padding: var(--arandu-space-3);
    --arandu-density-sidebar-width: 17rem;

    /* ----------------------------------------------------------------- */
    /* Breakpoints — fuente unica. En rem para respetar el zoom del      */
    /* usuario (WCAG 1.4.10 Reflow). Las media queries de layout.css y   */
    /* ui.css espejan estos valores; use-media-query los consume en JS.  */
    /* ----------------------------------------------------------------- */
    --arandu-bp-sm: 30rem; /* 480px — piso mobile read&triage */
    --arandu-bp-md: 48rem; /* 768px — tablet */
    --arandu-bp-lg: 64rem; /* 1024px — sobre esto la nav es fija */

    /* ----------------------------------------------------------------- */
    /* Puente shadcn/ui — su contrato apunta a nuestros semanticos.      */
    /* Asi todo componente shadcn hereda la paleta oficial.             */
    /* ----------------------------------------------------------------- */
    --background: var(--arandu-color-background);
    --foreground: var(--arandu-color-text);
    --card: var(--arandu-color-surface-raised);
    --card-foreground: var(--arandu-color-text);
    --popover: var(--arandu-color-surface-raised);
    --popover-foreground: var(--arandu-color-text);
    --primary: var(--arandu-color-primary);
    --primary-foreground: var(--arandu-color-primary-foreground);
    --secondary: var(--arandu-color-surface-muted);
    --secondary-foreground: var(--arandu-color-text);
    --muted: var(--arandu-color-surface-muted);
    --muted-foreground: var(--arandu-color-text-muted);
    --accent: var(--arandu-color-accent);
    --accent-foreground: var(--arandu-color-primary-foreground);
    --destructive: var(--arandu-color-error);
    --destructive-foreground: var(--arandu-color-primary-foreground);
    --border: var(--arandu-color-border);
    --input: var(--arandu-color-border);
    --ring: var(--arandu-focus-ring);
    --radius: var(--arandu-radius-lg);
  }

  [data-density="compact"] {
    --arandu-density-control-height: 2rem;
    --arandu-density-hit-target: 2.5rem;
    --arandu-density-table-cell-padding: var(--arandu-space-2);
    --arandu-density-sidebar-width: 15rem;
  }

  * {
    box-sizing: border-box;
  }

  body {
    margin: 0;
    background: var(--arandu-color-background);
    color: var(--arandu-color-text);
    font-family: var(--arandu-font-sans);
    font-feature-settings:
      "tnum" 1,
      "cv02" 1,
      "cv03" 1,
      "cv04" 1;
    font-variant-numeric: var(--arandu-font-numeric);
    letter-spacing: var(--arandu-font-tracking-ui);
    line-height: var(--arandu-line-height-normal);
  }

  :focus-visible {
    outline: 2px solid var(--arandu-focus-ring);
    outline-offset: var(--arandu-focus-offset);
  }

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

@theme {
  --color-arandu-background: var(--arandu-color-background);
  --color-arandu-primary: var(--arandu-color-primary);
  --color-arandu-primary-hover: var(--arandu-color-primary-hover);
  --color-arandu-accent: var(--arandu-color-accent);
  --color-arandu-surface: var(--arandu-color-surface);
  --color-arandu-surface-raised: var(--arandu-color-surface-raised);
  --color-arandu-surface-muted: var(--arandu-color-surface-muted);
  --color-arandu-border: var(--arandu-color-border);
  --color-arandu-border-strong: var(--arandu-color-border-strong);
  --color-arandu-text: var(--arandu-color-text);
  --color-arandu-text-muted: var(--arandu-color-text-muted);
  --color-arandu-success: var(--arandu-color-success);
  --color-arandu-warning: var(--arandu-color-warning);
  --color-arandu-error: var(--arandu-color-error);
  --color-arandu-info: var(--arandu-color-info);
  --font-sans: var(--arandu-font-sans);
  --font-mono: var(--arandu-font-mono);
  --tracking-arandu-ui: var(--arandu-font-tracking-ui);
  --tracking-arandu-label: var(--arandu-font-tracking-label);
  --radius-arandu-sm: var(--arandu-radius-sm);
  --radius-arandu-md: var(--arandu-radius-md);
  --radius-arandu-lg: var(--arandu-radius-lg);
  --radius-arandu-xl: var(--arandu-radius-xl);
}

/* Contrato shadcn/ui expuesto como utilidades (bg-background, text-foreground,
   border-border, ring-ring, bg-card, bg-primary, bg-destructive, ...). */
@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --radius-sm: var(--arandu-radius-sm);
  --radius-md: var(--arandu-radius-md);
  --radius-lg: var(--arandu-radius-lg);
  --radius-xl: var(--arandu-radius-xl);
}