/* Box Express — sistema de diseño
   Paleta "liquid glass": superficies translucidas con blur, acentos azul
   (identidad de marca) y "champan" (detalle premium), dark por defecto con
   override completo en [data-theme="light"]. Todo el resto del CSS consume
   unicamente estas variables. */

:root {
  color-scheme: dark;

  /* Fondo */
  --bg-0: oklch(0.15 0.02 255);
  --bg-1: oklch(0.19 0.02 255);
  --bg-2: oklch(0.23 0.02 255);
  --bg-mesh:
    radial-gradient(ellipse 60% 50% at 15% 0%, oklch(0.4 0.09 250 / 0.35), transparent 60%),
    radial-gradient(ellipse 55% 45% at 100% 20%, oklch(0.55 0.08 90 / 0.12), transparent 55%),
    radial-gradient(ellipse 60% 60% at 50% 100%, oklch(0.3 0.06 255 / 0.4), transparent 60%);

  /* Superficies "liquid glass" */
  --glass-bg: oklch(0.26 0.02 255 / 0.55);
  --glass-bg-strong: oklch(0.28 0.02 255 / 0.78);
  --glass-border: oklch(1 0 0 / 0.09);
  --glass-blur: blur(22px) saturate(160%);
  --shadow-soft: 0 1px 2px oklch(0 0 0 / 0.2), 0 12px 32px -12px oklch(0 0 0 / 0.5);
  --shadow-lift: 0 20px 60px -20px oklch(0 0 0 / 0.6);

  /* Texto */
  --text-0: oklch(0.97 0.005 255);
  --text-1: oklch(0.82 0.01 255);
  --text-2: oklch(0.64 0.015 255);
  --text-3: oklch(0.48 0.015 255);

  /* Bordes */
  --border-0: oklch(1 0 0 / 0.1);
  --border-1: oklch(1 0 0 / 0.06);

  /* Acentos: --accent es la unica variable que Ajustes sobreescribe en
     runtime (color de acento personalizable) - --accent-strong/--accent-bg
     se derivan de ella con color-mix() para que ese override alcance a
     repintar todo el acento de forma consistente. */
  --accent: oklch(0.7 0.15 250);
  --accent-strong: color-mix(in srgb, var(--accent) 82%, white);
  --accent-bg: color-mix(in srgb, var(--accent) 16%, transparent);
  --accent-2: oklch(0.82 0.09 85); /* champan */
  --accent-2-bg: oklch(0.82 0.09 85 / 0.14);

  /* Estado */
  --success: oklch(0.75 0.16 155);
  --success-bg: oklch(0.75 0.16 155 / 0.14);
  --warning: oklch(0.8 0.15 80);
  --warning-bg: oklch(0.8 0.15 80 / 0.14);
  --danger: oklch(0.7 0.19 25);
  --danger-bg: oklch(0.7 0.19 25 / 0.14);
  --info: oklch(0.72 0.12 230);
  --info-bg: oklch(0.72 0.12 230 / 0.14);

  /* Forma / ritmo */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-pill: 999px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  /* Tipografia */
  --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Sora', var(--font-ui);
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

  /* Motion */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 150ms;
  --dur-med: 250ms;
  --dur-slow: 400ms;

  /* Layout */
  --sidebar-w: 264px;
  --sidebar-w-collapsed: 76px;
  --topbar-h: 64px;
}

:root[data-theme='light'] {
  color-scheme: light;

  --bg-0: oklch(0.97 0.004 255);
  --bg-1: oklch(0.995 0.002 255);
  --bg-2: oklch(1 0 0);
  --bg-mesh:
    radial-gradient(ellipse 60% 50% at 15% 0%, oklch(0.7 0.07 250 / 0.16), transparent 60%),
    radial-gradient(ellipse 55% 45% at 100% 20%, oklch(0.8 0.08 90 / 0.14), transparent 55%),
    radial-gradient(ellipse 60% 60% at 50% 100%, oklch(0.75 0.05 255 / 0.14), transparent 60%);

  --glass-bg: oklch(1 0 0 / 0.6);
  --glass-bg-strong: oklch(1 0 0 / 0.85);
  --glass-border: oklch(0 0 0 / 0.07);
  --shadow-soft: 0 1px 2px oklch(0 0 0 / 0.04), 0 12px 32px -16px oklch(0 0 0 / 0.16);
  --shadow-lift: 0 20px 60px -24px oklch(0 0 0 / 0.24);

  --text-0: oklch(0.2 0.012 255);
  --text-1: oklch(0.36 0.015 255);
  --text-2: oklch(0.52 0.015 255);
  --text-3: oklch(0.66 0.015 255);

  --border-0: oklch(0 0 0 / 0.08);
  --border-1: oklch(0 0 0 / 0.05);

  --accent: oklch(0.56 0.16 250);
  --accent-strong: color-mix(in srgb, var(--accent) 80%, black);
  --accent-bg: color-mix(in srgb, var(--accent) 10%, transparent);
  --accent-2: oklch(0.62 0.1 80);
  --accent-2-bg: oklch(0.62 0.1 80 / 0.12);

  --success: oklch(0.58 0.15 155);
  --success-bg: oklch(0.58 0.15 155 / 0.12);
  --warning: oklch(0.68 0.15 75);
  --warning-bg: oklch(0.68 0.15 75 / 0.12);
  --danger: oklch(0.58 0.19 25);
  --danger-bg: oklch(0.58 0.19 25 / 0.1);
  --info: oklch(0.56 0.11 230);
  --info-bg: oklch(0.56 0.11 230 / 0.1);
}