/* =====================================================================
   Academiq · Tokens de diseño
   Fuente única de verdad para color, tipografia, espacio y movimiento.
   La landing y la aplicación comparten estos tokens: por eso se sienten
   como un mismo producto.
   ===================================================================== */

:root {
  color-scheme: light;

  /* ---------- Marca ---------- */
  --brand-50:  #f1f0fe;
  --brand-100: #e5e3fd;
  --brand-200: #cdc9fb;
  --brand-300: #ada6f7;
  --brand-400: #8b80f1;
  --brand-500: #6d5fe8;
  --brand-600: #5a4fea;
  --brand-700: #4a3fc9;
  --brand-800: #3d35a3;
  --brand-900: #332d81;

  /* Acento calido: energía deportiva, se usa con moderacion */
  --accent-50:  #fff6e8;
  --accent-100: #ffe9c6;
  --accent-300: #ffcd7a;
  --accent-500: #f5a524;
  --accent-600: #dd8a0c;
  --accent-700: #b06c07;

  /* ---------- Neutros ---------- */
  --ink-25:  #fcfcfe;
  --ink-50:  #f7f7fb;
  --ink-100: #f0f0f6;
  --ink-150: #e8e8f1;
  --ink-200: #dedee9;
  --ink-300: #c3c3d4;
  --ink-400: #9a9ab0;
  --ink-500: #73738c;
  --ink-600: #56566c;
  --ink-700: #3e3e52;
  --ink-800: #26263a;
  --ink-900: #191929;
  --ink-950: #101020;

  /* ---------- Semanticos ---------- */
  --success-50:  #e9f9f0;
  --success-100: #cdf0de;
  --success-500: #17a673;
  --success-600: #12855c;
  --success-700: #0d6847;

  --warning-50:  #fef7e7;
  --warning-100: #fbeac4;
  --warning-500: #e8a13a;
  --warning-600: #c07f1c;
  --warning-700: #8f5e12;

  --danger-50:  #fdeef1;
  --danger-100: #fad3da;
  --danger-500: #e0455f;
  --danger-600: #c22843;
  --danger-700: #9b1c33;

  --info-50:  #eaf2fe;
  --info-100: #d0e2fd;
  --info-500: #3b82f6;
  --info-600: #2563eb;
  --info-700: #1d4ed8;

  /* ---------- Roles semanticos (lo que usan los componentes) ---------- */
  --bg:            var(--ink-50);
  --bg-elevated:   #ffffff;
  --bg-sunken:     var(--ink-100);
  --surface:       #ffffff;
  --surface-2:     var(--ink-25);
  --surface-3:     var(--ink-50);
  --surface-hover: var(--ink-50);
  --surface-active: var(--ink-100);

  --text:          var(--ink-900);
  --text-strong:   var(--ink-950);
  --text-muted:    var(--ink-500);
  --text-subtle:   var(--ink-400);
  --text-inverse:  #ffffff;

  --border:        var(--ink-150);
  --border-strong: var(--ink-200);
  --border-subtle: var(--ink-100);

  --brand:         var(--brand-600);
  --brand-hover:   var(--brand-700);
  --brand-text:    var(--brand-700);
  --brand-soft:    var(--brand-50);
  --brand-soft-border: var(--brand-100);

  --accent:        var(--accent-600);
  --accent-soft:   var(--accent-50);

  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--brand-500) 32%, transparent);

  /* ---------- Tipografia ---------- */
  --font-sans: "Segoe UI Variable Display", "Segoe UI", -apple-system,
               BlinkMacSystemFont, "SF Pro Text", Inter, Roboto,
               "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, "Cascadia Mono",
               Menlo, Consolas, "Liberation Mono", monospace;

  --text-2xs: 0.6875rem;  /* 11 */
  --text-xs:  0.75rem;    /* 12 */
  --text-sm:  0.8125rem;  /* 13 */
  --text-base:0.9375rem;  /* 15 */
  --text-md:  1rem;       /* 16 */
  --text-lg:  1.125rem;   /* 18 */
  --text-xl:  1.375rem;   /* 22 */
  --text-2xl: 1.75rem;    /* 28 */
  --text-3xl: 2.25rem;    /* 36 */
  --text-4xl: 3rem;       /* 48 */
  --text-5xl: 3.75rem;    /* 60 */

  --leading-tight: 1.2;
  --leading-snug: 1.4;
  --leading-normal: 1.6;

  --tracking-tighter: -0.03em;
  --tracking-tight: -0.018em;
  --tracking-normal: 0;
  --tracking-wide: 0.02em;
  --tracking-caps: 0.06em;

  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semi: 600;
  --weight-bold: 680;

  /* ---------- Espacio ---------- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-7: 1.75rem;
  --sp-8: 2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;
  --sp-32: 8rem;

  /* ---------- Radios ---------- */
  --r-xs: 5px;
  --r-sm: 8px;
  --r-md: 11px;
  --r-lg: 14px;
  --r-xl: 18px;
  --r-2xl: 24px;
  --r-full: 999px;

  /* ---------- Sombras ---------- */
  --shadow-xs: 0 1px 2px rgba(16, 16, 32, .05);
  --shadow-sm: 0 1px 2px rgba(16, 16, 32, .05), 0 2px 6px rgba(16, 16, 32, .04);
  --shadow-md: 0 2px 4px rgba(16, 16, 32, .04), 0 8px 20px rgba(16, 16, 32, .07);
  --shadow-lg: 0 4px 8px rgba(16, 16, 32, .04), 0 16px 40px rgba(16, 16, 32, .10);
  --shadow-xl: 0 8px 16px rgba(16, 16, 32, .05), 0 32px 72px rgba(16, 16, 32, .14);
  --shadow-brand: 0 6px 20px color-mix(in srgb, var(--brand-600) 26%, transparent);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, .6);

  /* ---------- Movimiento ---------- */
  --ease-out: cubic-bezier(.22, .61, .36, 1);
  --ease-in-out: cubic-bezier(.45, .05, .55, .95);
  --ease-spring: cubic-bezier(.34, 1.4, .64, 1);
  --dur-fast: 120ms;
  --dur: 200ms;
  --dur-slow: 340ms;
  --dur-slower: 600ms;

  /* ---------- Layout de la aplicación ---------- */
  --sidebar-w: 256px;
  --sidebar-w-collapsed: 68px;
  --topbar-h: 60px;
  --bottombar-h: 62px;
  --content-max: 1400px;
  --z-sticky: 50;
  --z-drawer: 200;
  --z-modal: 300;
  --z-toast: 400;
  --z-palette: 500;
}

/* =====================================================================
   Modo oscuro
   Se activa con data-theme="dark" o por preferencia del sistema cuando
   el usuario no fijo un tema explicito.
   ===================================================================== */

:root[data-theme="dark"] {
  color-scheme: dark;

  --bg:            #0c0c16;
  --bg-elevated:   #14141f;
  --bg-sunken:     #08080f;
  --surface:       #15151f;
  --surface-2:     #1a1a26;
  --surface-3:     #20202e;
  --surface-hover: #1f1f2c;
  --surface-active: #26263a;

  --text:          #ececf3;
  --text-strong:   #ffffff;
  --text-muted:    #9d9db4;
  --text-subtle:   #71718a;
  --text-inverse:  #101020;

  --border:        #262636;
  --border-strong: #33334a;
  --border-subtle: #1d1d2a;

  --brand:         var(--brand-500);
  --brand-hover:   var(--brand-400);
  --brand-text:    var(--brand-300);
  --brand-soft:    color-mix(in srgb, var(--brand-500) 16%, #15151f);
  --brand-soft-border: color-mix(in srgb, var(--brand-500) 30%, #15151f);

  --accent:        var(--accent-500);
  --accent-soft:   color-mix(in srgb, var(--accent-500) 16%, #15151f);

  --success-50:  color-mix(in srgb, var(--success-500) 16%, #15151f);
  --success-100: color-mix(in srgb, var(--success-500) 30%, #15151f);
  --warning-50:  color-mix(in srgb, var(--warning-500) 16%, #15151f);
  --warning-100: color-mix(in srgb, var(--warning-500) 30%, #15151f);
  --danger-50:   color-mix(in srgb, var(--danger-500) 16%, #15151f);
  --danger-100:  color-mix(in srgb, var(--danger-500) 30%, #15151f);
  --info-50:     color-mix(in srgb, var(--info-500) 16%, #15151f);
  --info-100:    color-mix(in srgb, var(--info-500) 30%, #15151f);

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, .5);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, .55);
  --shadow-lg: 0 10px 34px rgba(0, 0, 0, .6);
  --shadow-xl: 0 22px 60px rgba(0, 0, 0, .7);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, .05);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    color-scheme: dark;

    --bg:            #0c0c16;
    --bg-elevated:   #14141f;
    --bg-sunken:     #08080f;
    --surface:       #15151f;
    --surface-2:     #1a1a26;
    --surface-3:     #20202e;
    --surface-hover: #1f1f2c;
    --surface-active: #26263a;

    --text:          #ececf3;
    --text-strong:   #ffffff;
    --text-muted:    #9d9db4;
    --text-subtle:   #71718a;
    --text-inverse:  #101020;

    --border:        #262636;
    --border-strong: #33334a;
    --border-subtle: #1d1d2a;

    --brand:         var(--brand-500);
    --brand-hover:   var(--brand-400);
    --brand-text:    var(--brand-300);
    --brand-soft:    color-mix(in srgb, var(--brand-500) 16%, #15151f);
    --brand-soft-border: color-mix(in srgb, var(--brand-500) 30%, #15151f);

    --accent:        var(--accent-500);
    --accent-soft:   color-mix(in srgb, var(--accent-500) 16%, #15151f);

    --success-50:  color-mix(in srgb, var(--success-500) 16%, #15151f);
    --success-100: color-mix(in srgb, var(--success-500) 30%, #15151f);
    --warning-50:  color-mix(in srgb, var(--warning-500) 16%, #15151f);
    --warning-100: color-mix(in srgb, var(--warning-500) 30%, #15151f);
    --danger-50:   color-mix(in srgb, var(--danger-500) 16%, #15151f);
    --danger-100:  color-mix(in srgb, var(--danger-500) 30%, #15151f);
    --info-50:     color-mix(in srgb, var(--info-500) 16%, #15151f);
    --info-100:    color-mix(in srgb, var(--info-500) 30%, #15151f);

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, .5);
    --shadow-md: 0 4px 14px rgba(0, 0, 0, .55);
    --shadow-lg: 0 10px 34px rgba(0, 0, 0, .6);
    --shadow-xl: 0 22px 60px rgba(0, 0, 0, .7);
    --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, .05);
  }
}

/* Respeto por quienes prefieren menos movimiento */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur: 0ms;
    --dur-slow: 0ms;
    --dur-slower: 0ms;
  }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Más contraste si el sistema lo pide */
@media (prefers-contrast: more) {
  :root {
    --border: var(--ink-300);
    --border-strong: var(--ink-400);
    --text-muted: var(--ink-600);
  }
}