/* ============================================================
   AGUA CIRCULAR — DESIGN TOKENS
   Sistema visual unificado para Intranet, aguacircular.cl y Ouaguas.cl
   ------------------------------------------------------------
   Estética: moderna, limpia, minimalista, SaaS-grade.
   Paleta basada en el logo (azules de marca) + neutrales fríos.
   Tipografía: Rubik (variable 300–700).
   Compatible con shadcn/ui via CSS variables HSL.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;600;700&display=swap');

/* ------------------------------------------------------------
   1. PRIMITIVE TOKENS (raw values — never used directly en UI)
   ------------------------------------------------------------ */
:root {
  /* — Brand (extraídos del logo Agua Circular) — */
  --ac-brand-50:  #EAF7FD;
  --ac-brand-100: #D0EEFA;
  --ac-brand-200: #A4DDF4;
  --ac-brand-300: #5CC2E7;  /* Gota clara del logo */
  --ac-brand-400: #2BAEE1;
  --ac-brand-500: #009BDF;  /* Azul vibrante del logo */
  --ac-brand-600: #0079B8;
  --ac-brand-700: #2060AD;  /* Azul medio del logo */
  --ac-brand-800: #004F71;  /* Azul institucional del logo (texto) */
  --ac-brand-900: #003A55;
  --ac-brand-950: #00263A;

  /* — Neutrales fríos (slate ajustado) — */
  --ac-slate-0:   #FFFFFF;
  --ac-slate-50:  #F8FAFC;
  --ac-slate-100: #F1F5F9;
  --ac-slate-200: #E2E8F0;
  --ac-slate-300: #CBD5E1;
  --ac-slate-400: #94A3B8;
  --ac-slate-500: #64748B;
  --ac-slate-600: #475569;
  --ac-slate-700: #334155;
  --ac-slate-800: #1E293B;
  --ac-slate-900: #0F172A;
  --ac-slate-950: #020617;

  /* — Semánticos — */
  --ac-success-50:  #ECFDF5;
  --ac-success-100: #D1FAE5;
  --ac-success-500: #10B981;
  --ac-success-600: #059669;
  --ac-success-700: #047857;

  --ac-warning-50:  #FFFBEB;
  --ac-warning-100: #FEF3C7;
  --ac-warning-500: #F59E0B;
  --ac-warning-600: #D97706;
  --ac-warning-700: #B45309;

  --ac-danger-50:  #FEF2F2;
  --ac-danger-100: #FEE2E2;
  --ac-danger-500: #EF4444;
  --ac-danger-600: #DC2626;
  --ac-danger-700: #B91C1C;

  --ac-info-50:  #EFF6FF;
  --ac-info-100: #DBEAFE;
  --ac-info-500: #3B82F6;
  --ac-info-600: #2563EB;
  --ac-info-700: #1D4ED8;
}

/* ------------------------------------------------------------
   2. SEMANTIC TOKENS — Light theme (default)
   shadcn-compatible: estos son los que usa el código.
   Valores en HSL para que Tailwind/shadcn los compongan con alpha.
   ------------------------------------------------------------ */
:root {
  /* Superficies */
  --background:           210 40% 99%;     /* #FBFCFD — fondo app */
  --foreground:           215 33% 17%;     /* #1E293B — texto principal */

  --card:                 0 0% 100%;       /* #FFFFFF */
  --card-foreground:      215 33% 17%;

  --popover:              0 0% 100%;
  --popover-foreground:   215 33% 17%;

  /* Primario (acción principal — azul medio) */
  --primary:              199 100% 44%;    /* #009BDF */
  --primary-foreground:   0 0% 100%;       /* texto sobre primary */
  --primary-hover:        202 100% 36%;    /* #0079B8 */
  --primary-active:       209 70% 40%;     /* #2060AD */

  /* Brand profundo (navegación, headers institucionales) */
  --brand-deep:           199 100% 22%;    /* #004F71 */
  --brand-deep-foreground:0 0% 100%;

  /* Brand claro (badges suaves, acentos) */
  --brand-soft:           199 75% 95%;     /* #EAF7FD */
  --brand-soft-foreground:199 100% 22%;

  /* Secundario (acción secundaria neutra) */
  --secondary:            210 40% 96%;     /* #F1F5F9 */
  --secondary-foreground: 215 25% 27%;     /* #334155 */

  /* Muted (fondos sutiles, texto suave) */
  --muted:                210 40% 96%;
  --muted-foreground:     215 16% 47%;     /* #64748B */

  /* Accent (hover de items, selección suave) */
  --accent:               199 75% 95%;     /* azul muy claro */
  --accent-foreground:    199 100% 22%;

  /* Semánticos */
  --success:              160 84% 39%;     /* #10B981 */
  --success-foreground:   0 0% 100%;
  --success-soft:         152 81% 96%;
  --success-soft-foreground: 158 75% 26%;

  --warning:              38 92% 50%;      /* #F59E0B */
  --warning-foreground:   0 0% 100%;
  --warning-soft:         48 100% 96%;
  --warning-soft-foreground: 27 84% 30%;

  --destructive:          0 84% 60%;       /* #EF4444 */
  --destructive-foreground:0 0% 100%;
  --destructive-soft:     0 86% 97%;
  --destructive-soft-foreground: 0 73% 41%;

  --info:                 217 91% 60%;
  --info-foreground:      0 0% 100%;
  --info-soft:            214 100% 97%;
  --info-soft-foreground: 224 76% 48%;

  /* Bordes & inputs */
  --border:               214 32% 91%;     /* #E2E8F0 */
  --border-strong:        214 20% 82%;     /* #CBD5E1 */
  --input:                214 32% 91%;
  --input-focus:          199 100% 44%;
  --ring:                 199 100% 44%;    /* anillo de focus */

  /* — Radios — */
  --radius-xs:  4px;
  --radius-sm:  6px;
  --radius:     8px;     /* default shadcn */
  --radius-md:  10px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-2xl: 24px;
  --radius-full: 9999px;

  /* — Sombras (elevación SaaS suave) — */
  --shadow-xs: 0 1px 2px 0 rgb(15 23 42 / 0.04);
  --shadow-sm: 0 1px 2px 0 rgb(15 23 42 / 0.05), 0 1px 3px 0 rgb(15 23 42 / 0.06);
  --shadow:    0 1px 3px 0 rgb(15 23 42 / 0.08), 0 1px 2px -1px rgb(15 23 42 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(15 23 42 / 0.08), 0 2px 4px -2px rgb(15 23 42 / 0.05);
  --shadow-lg: 0 10px 15px -3px rgb(15 23 42 / 0.10), 0 4px 6px -4px rgb(15 23 42 / 0.05);
  --shadow-xl: 0 20px 25px -5px rgb(15 23 42 / 0.10), 0 8px 10px -6px rgb(15 23 42 / 0.05);
  --shadow-focus: 0 0 0 3px rgb(0 155 223 / 0.25);

  /* — Tipografía — */
  --font-sans: 'Rubik', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, monospace;

  /* Escala (modular 1.200) */
  --text-2xs:  0.6875rem; /* 11px — micro UI: badges, eyebrows, metadata, calendar DOW */
  --text-xs:   0.75rem;   /* 12px */
  --text-sm:   0.875rem;  /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-lg:   1.125rem;  /* 18px */
  --text-xl:   1.25rem;   /* 20px */
  --text-2xl:  1.5rem;    /* 24px */
  --text-3xl:  1.875rem;  /* 30px */
  --text-4xl:  2.25rem;   /* 36px */
  --text-5xl:  3rem;      /* 48px */

  /* Line-heights */
  --leading-tight:   1.2;
  --leading-snug:    1.35;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  /* Letter-spacing */
  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.025em;
  --tracking-wider:  0.05em;

  /* — Espaciado (escala 4px) — */
  --space-0:  0;
  --space-1:  0.25rem;  /* 4 */
  --space-2:  0.5rem;   /* 8 */
  --space-3:  0.75rem;  /* 12 */
  --space-4:  1rem;     /* 16 */
  --space-5:  1.25rem;  /* 20 */
  --space-6:  1.5rem;   /* 24 */
  --space-8:  2rem;     /* 32 */
  --space-10: 2.5rem;   /* 40 */
  --space-12: 3rem;     /* 48 */
  --space-16: 4rem;     /* 64 */
  --space-20: 5rem;     /* 80 */
  --space-24: 6rem;     /* 96 */

  /* — Layout — */
  --container-sm:  640px;
  --container-md:  768px;
  --container-lg:  1024px;
  --container-xl:  1280px;
  --container-2xl: 1440px;

  --header-height:  64px;
  --sidebar-width:  260px;
  --sidebar-collapsed: 64px;

  /* — Z-index — */
  --z-base:     0;
  --z-dropdown: 1000;
  --z-sticky:   1100;
  --z-overlay:  1200;
  --z-modal:    1300;
  --z-popover:  1400;
  --z-toast:    1500;
  --z-tooltip:  1600;

  /* — Motion — */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast:   120ms;
  --duration-normal: 200ms;
  --duration-slow:   320ms;
}

/* ------------------------------------------------------------
   3. DARK THEME (opcional — para futuro modo oscuro)
   ------------------------------------------------------------ */
.dark {
  --background:           215 33% 9%;
  --foreground:           210 40% 98%;

  --card:                 215 33% 12%;
  --card-foreground:      210 40% 98%;

  --popover:              215 33% 12%;
  --popover-foreground:   210 40% 98%;

  --primary:              199 90% 55%;
  --primary-foreground:   199 100% 12%;
  --primary-hover:        199 90% 65%;
  --primary-active:       199 90% 45%;

  --brand-deep:           199 60% 35%;
  --brand-deep-foreground: 0 0% 100%;

  --brand-soft:           199 50% 18%;
  --brand-soft-foreground: 199 85% 85%;

  --secondary:            215 28% 18%;
  --secondary-foreground: 210 40% 98%;

  --muted:                215 28% 18%;
  --muted-foreground:     215 20% 65%;

  --accent:               215 28% 18%;
  --accent-foreground:    210 40% 98%;

  --success:              160 70% 45%;
  --warning:              38 85% 55%;
  --destructive:          0 75% 55%;
  --info:                 217 85% 65%;

  --border:               215 28% 22%;
  --border-strong:        215 25% 32%;
  --input:                215 28% 22%;
  --ring:                 199 90% 55%;
}