@import "tailwindcss";

@import "@fontsource/inter/400.css";
@import "@fontsource/inter/500.css";
@import "@fontsource/inter/600.css";
@import "@fontsource/inter/700.css";
@import "@fontsource/jetbrains-mono/400.css";

/* ================================================================
   SIG-CM 2.0 Design System v2.0 — Tokens
   Source of truth: Obsidian/02-ARQUITECTURA-y-TECH-STACK/2.14 🎨 Design System.md
   Brand: #008fbe (logo) + violet accent → tech sophistication
   Style: dark-first elegante, glassmorphism, multi-layer shadows
   ================================================================ */

@layer base {
  :root {
    /* ── Brand cyan (logo #008fbe) ──────────────────────────── */
    --brand-50:  oklch(0.972 0.013 220);
    --brand-100: oklch(0.935 0.035 220);
    --brand-200: oklch(0.870 0.072 220);
    --brand-300: oklch(0.780 0.108 220);
    --brand-400: oklch(0.700 0.135 220);
    --brand-500: oklch(0.625 0.130 220); /* logo #008fbe */
    --brand-600: oklch(0.530 0.135 222);
    --brand-700: oklch(0.440 0.115 224);
    --brand-800: oklch(0.350 0.085 226);
    --brand-900: oklch(0.270 0.060 228);
    --brand-950: oklch(0.190 0.040 230);

    /* ── Violet accent (combo tech con brand cyan) ──────────── */
    --accent-violet-400: oklch(0.700 0.180 280);
    --accent-violet-500: oklch(0.620 0.200 280);
    --accent-violet-600: oklch(0.530 0.205 280);

    /* ── Neutral (slate con shift sutil hacia azul/violeta) ── */
    --neutral-50:  oklch(0.985 0.004 250);
    --neutral-100: oklch(0.962 0.007 250);
    --neutral-200: oklch(0.910 0.012 250);
    --neutral-300: oklch(0.835 0.018 250);
    --neutral-400: oklch(0.680 0.022 250);
    --neutral-500: oklch(0.540 0.025 250);
    --neutral-600: oklch(0.435 0.025 250);
    --neutral-700: oklch(0.345 0.022 250);
    --neutral-800: oklch(0.250 0.020 250);
    --neutral-900: oklch(0.185 0.015 250);
    --neutral-950: oklch(0.130 0.013 250);

    /* ── Semantic ──────────────────────────────────────────── */
    --success:                oklch(0.640 0.155 145);
    --success-foreground:     oklch(0.990 0.000 0);
    --warning:                oklch(0.760 0.150 75);
    --warning-foreground:     oklch(0.220 0.050 75);
    --warning-bg:             oklch(0.970 0.040 80);  /* banner bg — usado en fiscal ADM-009 */
    --warning-border:         oklch(0.870 0.090 78);  /* border del banner warning */

    /* ── shadcn semantic mapping (LIGHT) ─────────────────── */
    --background:             oklch(0.962 0.006 250); /* slate cool — pop con cards white */
    --foreground:             var(--neutral-900);

    --card:                   oklch(1 0 0);            /* pure white — máximo contraste */
    --card-foreground:        var(--neutral-900);

    --popover:                oklch(1 0 0);
    --popover-foreground:     var(--neutral-900);

    --primary:                var(--brand-600);        /* WCAG AA on white */
    --primary-foreground:     oklch(0.990 0.000 0);

    --secondary:              var(--neutral-100);
    --secondary-foreground:   var(--neutral-800);

    --muted:                  var(--neutral-100);
    --muted-foreground:       var(--neutral-500);

    --accent:                 var(--brand-50);
    --accent-foreground:      var(--brand-700);

    --destructive:            oklch(0.600 0.220 25);
    --destructive-foreground: oklch(0.990 0.000 0);

    --border:                 var(--neutral-200);
    --input:                  oklch(1 0 0);            /* WHITE inputs en light, no gris */
    --input-border:           var(--neutral-300);      /* border más prominente */
    --ring:                   var(--brand-500);

    /* ── Glass surfaces (backdrop-blur) ───────────────────── */
    --glass-bg:               oklch(1 0 0 / 0.7);
    --glass-border:           oklch(1 0 0 / 0.4);

    /* ── Gradient backgrounds (hero, login) ───────────────── */
    --gradient-mesh:
      radial-gradient(at 100% 0%, oklch(0.625 0.130 220 / 0.12) 0px, transparent 50%),
      radial-gradient(at 0% 100%, oklch(0.620 0.200 280 / 0.10) 0px, transparent 50%),
      radial-gradient(at 50% 50%, oklch(0.700 0.135 220 / 0.05) 0px, transparent 60%);

    /* ── Shadows (multi-layer para depth real) ────────────── */
    --shadow-sm:              0 1px 2px 0 oklch(0.185 0.015 250 / 0.05);
    --shadow:                 0 1px 3px 0 oklch(0.185 0.015 250 / 0.08), 0 1px 2px -1px oklch(0.185 0.015 250 / 0.06);
    --shadow-md:              0 4px 8px -2px oklch(0.185 0.015 250 / 0.08), 0 2px 4px -2px oklch(0.185 0.015 250 / 0.04);
    --shadow-lg:              0 12px 24px -6px oklch(0.185 0.015 250 / 0.12), 0 4px 8px -3px oklch(0.185 0.015 250 / 0.06);
    --shadow-xl:              0 24px 48px -12px oklch(0.185 0.015 250 / 0.18), 0 8px 16px -8px oklch(0.185 0.015 250 / 0.08);
    --shadow-glow:            0 0 0 1px oklch(0.625 0.130 220 / 0.10), 0 0 24px -4px oklch(0.625 0.130 220 / 0.20);

    /* ── Spacing & shape ───────────────────────────────────── */
    --radius:                 0.625rem; /* 10px */

    /* ── Typography ────────────────────────────────────────── */
    --font-sans: "Inter", system-ui, -apple-system, sans-serif;
    --font-mono: "JetBrains Mono", "Cascadia Code", Consolas, monospace;
  }

  .dark {
    /* Background con shift sutil hacia violet → "tech" feel */
    --background:             oklch(0.130 0.018 252);  /* deep slate-violet — más oscuro para contraste */
    --foreground:             var(--neutral-50);

    --card:                   oklch(0.220 0.024 252);  /* elevación visual marcada — pop sobre bg */
    --card-foreground:        var(--neutral-50);

    --popover:                oklch(0.245 0.024 252);  /* dropdowns/popovers más elevados aún */
    --popover-foreground:     var(--neutral-50);

    --primary:                var(--brand-400);        /* brighter en dark, "neon" feel */
    --primary-foreground:     oklch(0.130 0.013 250);

    --secondary:              oklch(0.255 0.022 252);
    --secondary-foreground:   var(--neutral-100);

    --muted:                  oklch(0.245 0.022 252);
    --muted-foreground:       var(--neutral-400);

    --accent:                 oklch(0.275 0.032 252);
    --accent-foreground:      var(--brand-300);

    --destructive:            oklch(0.580 0.190 25);
    --destructive-foreground: oklch(0.990 0.000 0);

    --warning-bg:             oklch(0.220 0.055 72);  /* banner bg dark mode — warm amber sutil */
    --warning-border:         oklch(0.380 0.090 74);

    --border:                 oklch(1 0 0 / 0.10);    /* sutil glass-style border */
    --input:                  oklch(0.245 0.022 252); /* elevado, mismo nivel que muted */
    --input-border:           oklch(1 0 0 / 0.14);
    --ring:                   var(--brand-400);

    /* Glass para dark */
    --glass-bg:               oklch(0.180 0.020 252 / 0.6);
    --glass-border:           oklch(1 0 0 / 0.10);

    /* Gradient mesh dark mode — más vibrante */
    --gradient-mesh:
      radial-gradient(at 100% 0%, oklch(0.625 0.130 220 / 0.20) 0px, transparent 50%),
      radial-gradient(at 0% 100%, oklch(0.620 0.200 280 / 0.18) 0px, transparent 50%),
      radial-gradient(at 50% 50%, oklch(0.700 0.135 220 / 0.08) 0px, transparent 60%);

    /* Shadows más intensas en dark */
    --shadow-sm:              0 1px 2px 0 oklch(0 0 0 / 0.30);
    --shadow:                 0 2px 4px 0 oklch(0 0 0 / 0.40), 0 1px 2px -1px oklch(0 0 0 / 0.30);
    --shadow-md:              0 4px 8px -2px oklch(0 0 0 / 0.40), 0 2px 4px -2px oklch(0 0 0 / 0.30);
    --shadow-lg:              0 12px 24px -6px oklch(0 0 0 / 0.50), 0 4px 8px -3px oklch(0 0 0 / 0.30);
    --shadow-xl:              0 24px 48px -12px oklch(0 0 0 / 0.60), 0 8px 16px -8px oklch(0 0 0 / 0.30);
    --shadow-glow:            0 0 0 1px oklch(0.700 0.135 220 / 0.30), 0 0 32px -4px oklch(0.700 0.135 220 / 0.40);
  }
}

@layer base {
  * {
    border-color: var(--border);
  }

  html {
    color-scheme: light dark;
  }

  body {
    margin: 0;
    background-color: var(--background);
    color: var(--foreground);
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  #root {
    min-height: 100svh;
  }

  ::selection {
    background-color: var(--brand-200);
    color: var(--brand-900);
  }
  .dark ::selection {
    background-color: var(--brand-700);
    color: var(--brand-50);
  }

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

  h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-sans);
    font-weight: 600;
    letter-spacing: -0.015em;
  }

  code, pre, kbd, samp {
    font-family: var(--font-mono);
  }

  /* ── Browser autofill (Chrome/Safari): forzar tokens del DS ──
     Sin esto, autofill aplica bg amarillo + texto blanco que se ve horrible
     y rompe contraste con cualquier paleta. */
  input:-webkit-autofill,
  input:-webkit-autofill:hover,
  input:-webkit-autofill:focus,
  input:-webkit-autofill:active,
  textarea:-webkit-autofill,
  select:-webkit-autofill {
    -webkit-text-fill-color: var(--foreground) !important;
    -webkit-box-shadow: 0 0 0 1000px var(--input) inset !important;
    caret-color: var(--foreground) !important;
    transition: background-color 5000s ease-in-out 0s;
  }
}

/* ================================================================
   Glass surface utility
   Uso: <div className="glass">…</div>
   ================================================================ */
@layer components {
  .glass {
    background-color: var(--glass-bg);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid var(--glass-border);
  }

  .gradient-mesh {
    background-image: var(--gradient-mesh);
  }

  /* Grid texture overlay — usar como fondo decorativo en surfaces grandes
     Light: 2.5% opacity (sutil pero visible). Dark: 5% (más presente) */
  .grid-bg {
    background-image:
      linear-gradient(to right, currentColor 1px, transparent 1px),
      linear-gradient(to bottom, currentColor 1px, transparent 1px);
    background-size: 56px 56px;
    color: var(--neutral-500);
    opacity: 0.07;
  }
  .dark .grid-bg {
    color: var(--neutral-400);
    opacity: 0.10;
  }

  /* Surface utility — para contenedores que no usan <Card> (ej: tablas, listas)
     Mismo treatment visual: bg elevado + border + shadow */
  .surface {
    background-color: var(--card);
    color: var(--card-foreground);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
  }

  /* Brand glow para focus en inputs críticos */
  .focus-glow:focus-visible {
    box-shadow: var(--shadow-glow);
    outline: none;
  }
}

/* ================================================================
   Tailwind 4 inline theme — utilidades disponibles globalmente
   ================================================================ */
@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-input-border:         var(--input-border);
  --color-ring:                 var(--ring);

  /* Brand */
  --color-brand-50:  var(--brand-50);
  --color-brand-100: var(--brand-100);
  --color-brand-200: var(--brand-200);
  --color-brand-300: var(--brand-300);
  --color-brand-400: var(--brand-400);
  --color-brand-500: var(--brand-500);
  --color-brand-600: var(--brand-600);
  --color-brand-700: var(--brand-700);
  --color-brand-800: var(--brand-800);
  --color-brand-900: var(--brand-900);
  --color-brand-950: var(--brand-950);

  /* Violet accent */
  --color-violet-400: var(--accent-violet-400);
  --color-violet-500: var(--accent-violet-500);
  --color-violet-600: var(--accent-violet-600);

  /* Semantic */
  --color-success:               var(--success);
  --color-success-foreground:    var(--success-foreground);
  --color-warning:               var(--warning);
  --color-warning-foreground:    var(--warning-foreground);
  --color-warning-bg:            var(--warning-bg);
  --color-warning-border:        var(--warning-border);

  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);

  --shadow-sm:    var(--shadow-sm);
  --shadow:       var(--shadow);
  --shadow-md:    var(--shadow-md);
  --shadow-lg:    var(--shadow-lg);
  --shadow-xl:    var(--shadow-xl);
  --shadow-glow:  var(--shadow-glow);

  --font-sans: var(--font-sans);
  --font-mono: var(--font-mono);
}
